HTML 5 (hypertext markup language) Lecture's:
PART 1:
PART 2:
PART 3:
PART 4:
PART 5:
PART 6:
Go to Link & Download:HTML_Tutorial PDF
Go to Link & Download:HTML_Ebook PDF
HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages.
- Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus the link available on a webpage are called Hypertext.
- As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark up" a text document with tags that tell a Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.
Basic HTML Document
In its simplest form, following is an example of an HTML document:
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here....</p>
</body>
</head>
</html>
HTML Tags
As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags. For example <html> has its closing tag</html> and <body> tag has its closing tag </body> tag etc.
Above example of HTML document uses folloiwng tags:
| Tag | Description |
|---|---|
| <!DOCTYPE...> | This tag defines the document type and HTML version. |
| <html> | This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags. |
| <head> | This tag represents the document's header which can keep other HTML tags like <title>, <link> etc. |
| <title> | The <title> tag is used inside the <head> tag to mention the document title. |
| <body> | This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc. |
| <h1> | This tag represents the heading. |
| <p> | This tag represents a paragraph. |
To learn HTML, you will need to study various tags and understand how do they behave while formatting a textual document. Learning HTML is simple as users have to learn the usage of different tags in order to format the text or images to make a beautiful webpage.
World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML 4.
HTML Document Structure
A typical HTML document will have following structure:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
We will study all the header and body tags in subsequent chapters, for now let's see what is document declaration tag.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:
<!DOCTYPE html>
There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE...> tag along with other HTML tags.
Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
</body>
</head>
</html>
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example:
<html>
<head>
<title>This is document title</title>
</head>
<body>
<p>Document content goes here....</p>
</body>
</head>
</html>
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
Horizontal Lines
Horizontal lines are used to visually break up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.
Nonbreaking Spaces
Suppose you want to use the phrase "12 Angry Men." Here you would not want a browser to split the "12, Angry" and "Men" across two lines:
An example of this technique appears in the movie "12 Angry Men."
In cases where you do not want the client browser to break text, you should use a nonbreaking space entity instead of a normal space. For example, when coding the "12 Angry Men" in a paragraph, you should use something similar to the following code:
are part of HTML-5.| Tag | Description | Version |
|---|---|---|
| <!--...--> | Specifies a comment | |
| <!DOCTYPE> | Specifies the document type | |
| <a> | Specifies an anchor | |
| <abbr> | Specifies an abbreviation | |
| <acronym> | Specifies an acronym | |
| <address> | Specifies an address element | |
| <applet> | Deprecated. Specifies an applet | |
| <area> | Specifies an area inside an image map | |
| <article> | Specifies an article | |
| <aside> | Specifies some content loosely related to the page content. If it is removed, the remaining content still makes sense | |
| <audio> | Specifies a sound content | |
| <b> | Specifies bold text | |
| <base> | Specifies a base URL for all the links in a page | |
| <basefont> | Deprecated. Specifies a base font | |
| <bdo> | Specifies the direction of text display | |
| <bdi> | Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows embedding a span of text with a different, or unknown, directionality | |
| <bgsound> | Specifies background music | |
| <big> | Specifies big text | |
| <blink> | Specifies a text which blinks | |
| <blockquote> | Specifies a long quotation | |
| <body> | Specifies the body element | |
| <br> | Inserts a single line break | |
| <button> | Specifies a push button | |
| <canvas> | For making graphics with a script | |
| <caption> | Specifies a table caption | |
| <center> | Deprecated. Specifies centered text | |
| <cite> | Specifies a citation | |
| <code> | Specifies computer code text | |
| <col> | Specifies attributes for table columns | |
| <colgroup> | Specifies groups of table columns | |
| <comment> | Puts a comment in the document | |
| <datalist> | A list of options for input values | |
| <dd> | Specifies a definition description | |
| <del> | Specifies deleted text | |
| <dfn> | Specifies a definition term | |
| <dialog> | Specifies a dialog box or window | |
| <dir> | Deprecated. Specifies a directory list | |
| <div> | Specifies a section in a document | |
| <dl> | Specifies a definition list | |
| <dt> | Specifies a definition term | |
| <em> | Specifies emphasized text | |
| <embed> | Specifies a container for an external (non-HTML) application | |
| <fieldset> | Specifies a fieldset | |
| <figcaption> | Specifies a caption for a <figure> element | |
| <figure> | Specifies self-contained content | |
| <font> | Deprecated. Specifies text font, size, and color | |
| <footer> | Specifies a footer for a document or section | |
| <form> | Specifies a form | |
| <frame> | Specifies a sub window (a frame) | |
| <frameset> | Specifies a set of frames | |
| <h1> to <h6> | Specifies header 1 to header 6 | |
| <head> | Specifies information about the document | |
| <header> | Specifies a header for a document or section | |
| <hr> | Specifies a horizontal rule | |
| <html> | Specifies an html document | |
| <i> | Specifies italic text | |
| <iframe> | Specifies an inline sub window (frame) | |
| <ilayer> | Specifies an inline layer | |
| <img> | Specifies an image | |
| <input> | Specifies an input field | |
| <ins> | Specifies inserted text | |
| <isindex> | Deprecated. Specifies a single-line input field | |
| <kbd> | Specifies keyboard text | |
| <keygen> | Generate key information in a form | |
| <label> | Specifies a label for a form control | |
| <layer> | Specifies a layer | |
| <legend> | Specifies a title in a fieldset | |
| <li> | Specifies a list item | |
| <link> | Specifies a resource reference | |
| <main> | Specifies the main or important content in the document. There is only one | |
| <map> | Specifies an image map | |
| <mark> | Specifies a text highlighted for reference purposes, that is for its relevance in another context | |
| <marquee> | Creates a scrolling-text marquee | |
| <menu> | Deprecated. Specifies a menu list | |
| <menuitem> | Specifies a command/menu item that the user can invoke from a popup menu | |
| <meta> | Specifies meta data of an html document which is not displayed on the page | |
| <meter> | Specifies a scalar measurement within a known range (a gauge) | |
| <multicol> | Specifies a multicolumn text flow | |
| <nav> | Specifies a section that contains only navigation links | |
| <nobr> | No breaks allowed in the enclosed text | |
| <noembed> | Specifies content to be presented by browsers that do not support the <embed> tag | |
| <noframes> | Specifies a noframe section | |
| <noscript> | Specifies a noscript section | |
| <object> | Specifies an embedded object | |
| <ol> | Specifies an ordered list | |
| <optgroup> | Specifies an option group | |
| <option> | Specifies an option in a drop-down list | |
| <output> | Specifies the result of a calculation | |
| <p> | Specifies a paragraph | |
| <param> | Specifies a parameter for an object | |
| <plaintext> | Deprecated. Render the remainder of the document as preformatted plain text | |
| <pre> | Specifies preformatted text | |
| <progress> | Specifies a completion progress of a task | |
| <q> | Specifies a short quotation | |
| <rp> | Specifies to show browsers that do not support the ruby element | |
| <rt> | Specifies an text ruby annotation | |
| <ruby> | Specifies an ruby annotation | |
| <s> | Deprecated. Specifies strikethrough text | |
| <samp> | Specifies sample computer code | |
| <script> | Specifies a script | |
| <section> | Specifies a section in a document | |
| <select> | Specifies a selectable list | |
| <spacer> | Specifies a white space | |
| <small> | Specifies small text | |
| <source> | Specifies a media resources for media elements, defined inside video or audio elements | |
| <span> | Specifies a section in a document | |
| <strike> | Deprecated. Specifies strikethrough text | |
| <strong> | Specifies strong text | |
| <style> | Specifies a style definition | |
| <sub> | Specifies subscripted text | |
| <summary> | Specifies a summary, caption, or legend for a given <details> | |
| <sup> | Specifies superscripted text | |
| <table> | Specifies a table | |
| <tbody> | Specifies a table body | |
| <td> | Specifies a table cell | |
| <textarea> | Specifies a text area | |
| <tfoot> | Specifies a table footer | |
| <th> | Specifies a table heading | |
| <thead> | Specifies a table header | |
| <time> | Specifies a date and time <details> | |
| <title> | Specifies the document title | |
| <tr> | Specifies a table row | |
| <track> | Specifies a text tracks used in mediaplayers | |
| <tt> | Specifies teletype text | |
| <u> | Deprecated. Specifies underlined text | |
| <ul> | Specifies an unordered list | |
| <var> | Specifies a variable | |
| <video> | Specifies a text tracks used in mediaplayers | |
| <wbr> | Indicates a potential word break point within a <nobr> section | |
| <xmp> | Deprecated. Specifies preformatted text |
html dd tag
ReplyDeletehtml tutorial
ReplyDelete