Nagarjuna College of Engineering and Technology Information Science and Engineering

Module 1 HTML 5 and CSS Lecture 01 Introduction to HTML Introduction to HTML

 Hypertext Markup Language (HTML) documents are simply text documents with a specific ◦ Documents comprised of content and markup tags ◦ Content: actual information being conveyed ◦ The markup tags tell the Web browser how to display the page ◦ An HTML file must have an htm or file extension ◦ An HTML file can be created using a simple text editor Lecture 02 Key components of HTML document Key components of HTML document

An HTML document is composed of three parts:  a line containing HTML version information,  a declarative header section (delimited by the HEAD element),  a body, which contains the document's actual content. The body may be implemented by the BODY element. An HTML page may contain Doctype, Comments, Elements or Tags, Attributes, Frames which may contain other HTML pages. DOCTYPE  A Doctype declares the version of an HTML document.  This needs to be the first thing in your document, before the or elements. Also, there is no closing tag. Doctype declaration: OR Comments

 We can add comments to your HTML source by using the following syntax:  Comments are not displayed by the browser.  Example:

This is a paragraph.

Lecture 03 HTML elements, Headers, Linking, Images HTML Elements

 An HTML element usually consists of a start tag and an end tag, with the content inserted in between: Content goes here... The HTML element is everything from the start tag to the end tag:

My first paragraph.

Start tag Element content End tag

My first paragraph

Example:

My First Heading

My first paragraph.

•The element defines the whole document. •It has a start tag and an end tag . •Inside the element is the element. •The element defines the document body. •It has a start tag and an end tag .  Inside the element is two other HTML elements:

and

.  The

element defines a heading.  It has a start tag

and an end tag

.  The element content is: My First Heading.  The

element defines a paragraph.  It has a start tag

and an end tag

.  The element content is: My first paragraph HTML Attributes

 All HTML elements can have attributes  Attributes provide additional information about an element  Attributes are always specified in the start tag  Attributes usually come in name/value pairs like: name="value" Headers

 Headings are defined with the

to

tags. 

defines the most important heading.

defines the least important heading.  Example:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
HTML Horizontal Rules  The
tag defines a break in an HTML page, and is most often displayed as a horizontal rule.  The
element is used to separate content (or define a change) in an HTML page:

Example:

This is heading 1

This is some text.

This is heading 2

This is some other text.

HTML Links

 HTML links are hyperlinks.  We can click on a link and jump to another document.  A link does not have to be text. It can be an image or any other HTML element. Syntax:  Hyperlinks are defined with the HTML tag: link text -The href attribute specifies the destination address of the link. -The link text is the visible part. Clicking on the link text will send us to the specified address.

Example:

Local Links

W3C is a link to a website on the .

HTML Links - The target Attribute

 The target attribute specifies where to open the linked document.  The target attribute can have one of the following values: _blank - Opens the linked document in a new window or tab _self - Opens the linked document in the same window/tab as it was clicked (this is default) _parent - Opens the linked document in the parent _top - Opens the linked document in the full body of the window

Visit W3Schools! Images  Images can improve the design and the appearance of a web page.  We can insert any image in our web page by using tag. Following is the simple syntax to use this tag. Example:

Image Links

The image is a link. You can click on it.

 The tag is empty, it contains attributes only, and does not have a closing tag.  The src attribute specifies the URL (web address) of the image  The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute). If a browser cannot find an image, it will display the value of the alt attribute,  We can use the width and height attributes to specify the width and height of an image and always defines the width and height of the image in pixels. HTML Links - Image as Link

 It is common to use images as links:

Image Links

The image is a link. You can click on it.

Lecture 04 Unordered Lists, and Nested and ordered Lists LISTS

 HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain − 

    − An unordered list. This will list items using plain bullets. 
      − An ordered list. This will use different schemes of numbers to list your items. 
      − A definition list. This arranges your items in the same way as they are arranged in a dictionary. HTML Unordered Lists  An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML
        tag. Each item in the list is marked with a bullet.

        HTML Unordered List

        • Beetroot
          • Output:
        • Ginger
        • Potato
          • •Beetroot
        • Radish
          • •Ginger •Potato
        •Radish The type Attribute

         We can use type attribute for

          tag to specify the type of bullet to display. By default, it is a disc. Following are the possible options:

                Example:

                • Beetroot
                  • Output:
                • Ginger
                • Potato
                  • .Beetroot
                • Radish
                  • .Ginger .Potato
                .Radish HTML Ordered Lists

                 If we are required to put the items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using

                  tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with
                1. . HTML Ordered List
                    Output:
                  1. Beetroot
                  2. Ginger
                    3. 1. Beetroot
                  3. Potato
                    4. 2. Ginger
                  4. Radish
                    5. 3. Potato
                  4. Radish The type Attribute

                   The type attribute can be used in

                    tag to specify the type of numbering to display. By default, it is a number. Following are the possible options −
                      - Default-Case Numerals.
                        - Upper-Case Numerals.
                          - Lower-Case Numerals.
                            - Upper-Case Letters.
                              - Lower-Case Letters. HTML Description Lists

                               HTML also supports description lists.  A description list is a list of terms, with a description of each term.  The

                              tag defines the description list, the
                              tag defines the term (name), and the
                              tag describes each term:

                              A Description List

                              Coffee
                              Output:
                              - black hot drink
                              Milk
                              A Description List
                              - white cold drink
                              Coffee
                              - black hot drink Milk - white cold drink Nested HTML Lists

                              A Nested List

                              List can be nested (lists inside lists):

                              1. Coffee
                              2. Tea Output:
                                1. Black tea
                                  2. A Nested List
                                2. Green tea
                                  3. List can be nested (lists
                                inside lists):
                                3. 1.Coffee
                              3. Milk
                                4. 2.Tea
                              1.Black tea 2.Green tea 3.Milk Lecture 05 HTML Tables and Formatting HTML Tables

                               An HTML table is defined with the

                              tag.  Each table row is defined with the tag. A table header is defined with the
                              tag. By default, table headings are bold and centered.  A table data/cell is defined with the tag. The elements are the data containers of the table. They can contain all sorts of HTML elements; text, images, lists, other tables, etc. HTML Tables
                              Row 1, Column 1 Row 1, Column 2
                              Row 2, Column 1 Row 2, Column 2
                               the border is an attribute of tag and it is used to put a border across all the cells. If you do not need a border, then you can use border = "0". Table Heading  Table heading can be defined using
                              tag. This tag will be put to replace tag, which is used to represent actual data cell. Headings, which are defined in tag are centered and bold by default. HTML Table Header
                              Name Salary
                              Ramesh Raman 5000
                              Shabbir Hussein 7000
                              Cellpadding and Cellspacing Attributes  There are two attributes called cellpadding and cellspacing which we will use to adjust the white space in the table cells. The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell. Colspan and Rowspan Attributes  We will use colspan attribute if we want to merge two or more columns into a single column. Similar way we will use rowspan if we want to merge two or more rows. Lecture 06 HTML Forms, Internal Linking HTML Forms

                               The HTML

                              tag is used to create an HTML form.  Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more. The Element  The element is the most important form element.  The element can be displayed in several ways, depending on the type attribute. Text Input: - Defines a one-line text input field.

                              First name:

                              Last name:

                              Radio Button Input - Defines a radio button (for selecting one of many choices)

                              Male
                              Female
                              Other
                              The Submit Button  defines a button for submitting the form data to a form-handler.  The form-handler is specified in the form's action attribute.

                              First name:


                              Last name:


                              Lecture 07 Creating and Using Images, Maps, tags Maps, Div and Span tags

                              Maps  The tag is used to define a client-side image-map. An image-map is an image with clickable areas.  The required name attribute of the element is associated with the 's usemap attribute and creates a relationship between the image and the map.  The element contains a number of elements, that defines the clickable areas in the image map.

                              Click on the sun or on one of the planets to watch it closer:

                              Sun Mercury Venus

                              Here name - Specifies the name of an image-map

                              tag  The
                              tag defines a division or a section in an HTML document.  The
                              element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.

                              tag

                               The tag is used to group inline-elements in a document.  The tag provides no visual change by itself.  The tag provides a way to add a hook to a part of a text or a part of a document. Lecture 08 Introduction CSS, CSS selector, positioning, layouts, debugging CSS (Cascading Style Sheets)  CSS describes how HTML elements are to be displayed on screen.  External stylesheets are stored in CSS files.

                              Why use CSS? CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. CSS Syntax  A CSS rule-set consists of a selector and a declaration block:  The selector points to the HTML element you want to style.  The declaration block contains one or more declarations separated by semicolons.  Each declaration includes a CSS property name and a value, separated by a colon.  A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. Selector Declaration h1 { color:blue;font-size:12px;} CSS Selectors CSS selectors are used to "find” HTML elements based on their element name, id, class, attribute, and more.

                              1. The element Selector  The element selector selects elements based on the element name. Example: p { text-align: center; color: red; } 2. The id Selector  The id selector uses the id attribute of an HTML element to select a specific element.  To select an element with a specific id, write a hash (#) character, followed by the id of the element.

                              Example: #para1 { text-align: center; color: red; } 3. The class Selector  The class selector selects elements with a specific class attribute.  To select elements with a specific class, write a period (.) character, followed by the name of the class.

                              Example: .center { text-align: center; color: red; } 4. Grouping Selectors  If we have elements with the same style definitions, we can group the selectors.  In this example we have grouped the selectors. h1, h2, p { text-align: center; color: red; } CSS Positioning The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed). static - Default value. Elements render in order, as they appear in the document flow. absolute - The element is positioned relative to its first positioned (not static) ancestor element. fixed - The element is positioned relative to the browser window. relative - The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position. CSS Layouts  The display property is the most important CSS property for controlling layout.  The display property specifies if/how an element is displayed.  Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.