HTML is the standard markup language for creating Web pages.
- HTML stands for Hyper Text Markup Language
- HTML describes the structure of Web pages using markup
- HTML elements are the building blocks of HTML pages
- HTML elements are represented by tags
Tag are two type:-
Paired and unpaired
Paired Tags:
A tag is said to be a paired tag if the text is placed between a tag and its companion tag. In paired tags, the first tag is referred to as Opening Tag and the second tag is referred to as Closing Tag.Example
<i>This text is in italics. </i>Unpaired Tags:
An unpaired tag does not have a companion tag. Unpaired tags are also known as Singular or Stand-Alone Tags.Example
<br> , <hr>
DOCTYPE is the first thing which should be present in an HTML5 document.
HTML5 doctype is written as <!doctype html>
'DOCTYPE' keyword is not case sensitive. So, <!doctype html> or <!DOCTYPE html>, both will do.
HTML5 doctype does not reference to a DTD. This is because, html5 is a SGML based, unlike HTML4.01 or XHTML1.
As soon a browser finds <!doctype html> in the starting of an HTML document, it represents the document in standard mode. If you don't use a doctype in the starting of an HTML document, the browser goes to the quirky mode. In that case, you may find that certain content is not being displayed the way you marked them up. So, it is a good practice to start your HTML document with a doctype.
HTML Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
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"
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
The HTML <p> element defines a paragraph
In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
HTML Link Colors
By default, a link will appear like this (in all browsers):
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
You can change the default colors, by using styles:
Example
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;}
</style>
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
- framename - Opens the linked document in a named frame
Img for
<img src="url" alt="some_text" style="width:width;height:height;">
video for
<video src="path" alt="some_text" controls autoplay style="width:width;height:height;">
Audio
<audio src="path" alt="some_text" controls autoplay style="width:width;height:height;">
- Use the HTML <img> element to define an image
- Use the HTML src attribute to define the URL of the image
- Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
- Use the HTML width and height attributes to define the size of the image
- Use the CSS width and height properties to define the size of the image (alternatively)
- Use the CSS float property to let the image float
- Use the HTML <map> element to define an image-map
- Use the HTML <area> element to define the clickable areas in the image-map
- Use the HTML <img>'s element usemap attribute to point to an image-map
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
HTML Table - Adding a Caption
To add a caption to a table, use the <caption> tag:
No comments:
Post a Comment