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 form ◦ 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 html 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:
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:
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 Thetag 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 World Wide Web.
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 frame _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 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.
- Beetroot Output:
- Ginger
- Potato •Beetroot
- Radish •Ginger •Potato
- Beetroot Output:
- Ginger
- Potato .Beetroot
- Radish .Ginger .Potato
- .
HTML Ordered List - Output:
- Beetroot
- Ginger 1. Beetroot
- Potato 2. Ginger
- Radish 3. Potato
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 −
- 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
A Nested List
List can be nested (lists inside lists):
- Coffee
- Tea Output:
- Black tea A Nested List
- Green tea List can be nested (lists
1.Coffee - Milk 2.Tea
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 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 The HTML
Radio Button Input - Defines a radio button (for selecting one of many choices) 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. Lecture 07 Creating and Using Images, Maps, Div and span tags Maps, Div and Span tagsMaps The
Click on the sun or on one of the planets to watch it closer:
Here name - Specifies the name of an image-map
tag Thetag defines a division or a section in an HTML document. Theelement 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.
- - 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
- − 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.
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:
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