Html basics-auro skills

HTML-AUROSKILLS
Full Stack Developer Course

Course Outline
1. Introduction of HTML.
2. Tags , Elements And Attributes
3. Cell padding/Cell Spacing
4. Form Creation
5. Order list / Unorder List
6. Legend Tags And Field Sets
7. Marque

Introduction of HTML
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 is 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.

Syntax For HTML
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>

HTML- Heading’s Tag’s
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>

HTML- Paragrah Tag-<p>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

HTML- Line Break Tag (<br>)
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Boney</p>
</body>
</html>

HTML- Centering tag<center>
You can use <center> tag to put any content in the center of the page or any table cell
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>

HTML- Horizontal Lines - <hr>
The <hr> tag creates
a line from the current position in the document to the right margin and breaks the line
accordingly.
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>

HTML- Preserve Formatting- <pre>
If you want your text to follow the exact format of how it is written in the HTML
document. In these cases, you can use the preformatted tag <pre>.
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>

HTML- Italic & Under line- <i><em><u>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>

HTML- Align Attribute Example
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>

HTML- The style Attribute Example
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:black;">Lorem</p>
</body>
</html>

HTML- Bold Text
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

HTML- Strike Text
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>

HTML- Monoface Font- <tt> tag
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are
known as variable-width fonts because different letters are of different widths (for example,
the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the
same width.
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>

HTML- superscript & subscript <sup> & <sub>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>

HTML- Inserted Text
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>

HTML- Grouping Content
The <div> and <span> elements allow you to group together several elements to create
sections or subsections of a page.
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href=“#">HOME</a> |
<a href=“#">CONTACT</a> |
<a href=“#">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>

HTML- Marked Text
<html>
<head>
<title>Marked Text</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>

HTML- Strong Text
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>

HTML-Text Direction <bdo>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>

HTML- Quoting Text
When you want to quote a passage from another source, you should put it in
between<blockquote>...</blockquote> tags.
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>Lorem</p>
<blockquote>Lorem</blockquote>
</body>
</html>

HTML- Computer Code
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>

HTML-Address Text
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Hadapsar - Pune</address>
</body>
</html>

HTML- Table
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>

HTML- Cell Padding and Cell Spacing
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

HTML- ColSpan And RowSpan
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell
3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

HTML-Unorder list
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

HTML-order list
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

HTML- Defination List
<dl> - Defines the start of the list
<dt> - A term
<dd> - Term definition
</dl> - Defines the end of
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

HTML-Marquee Tag
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>

HTML-Div Tag
The HTML <div> tag is used for defining a section of your document. With the div tag, you
can group large sections of HTML elements together and format them with CSS.
<html>
<head>
<title>HTML div Tag</title>
#contentinfo p {
line-height: 20px;
margin: 30px;
padding-bottom: 20px;
text-align: justify;
width: 140px;
color: red;
}
</head>
<body>
<div id="contentinfo">
<p>Welcome to our website. We provide tutorials on various subjects.</p>
</div>

HTML-Nav Tag
The HTML tag specifies a section that contains only navigation links.
<html>
<head>
<title>HTML Nav Tag</title>
</head>
<body>
<p>AuroSkills<p>
<nav>
<a href="dbms/index.htm">DBMS</a> |
<a href="mongodb/index.htm">MongoDB</a> |
<a href="mysql/index.htm">MySQL</a> |
<a href="plsql/index.htm">PL/SQL</a> |
<a href="sql/index.htm">SQL</a>
</nav>
</body>
</html>

Course Outline
Lesson 1.
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit
Lesson 2.
Sed ut perspiciatis unde omnis
iste natus error sit voluptatem
Lesson 3.
Lesson 4.
Sed ut perspiciatis unde omnis
iste natus error sit voluptatem
Lesson 5.

First Skill
• Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Maecenas porttitor congue
massa. Fusce posuere, magna
sed pulvinar ultricies.
• Nunc viverra imperdiet enim.
Fusce est. Vivamus a tellus.
• Pellentesque habitant morbi
tristique senectus et netus et
malesuada fames ac turpis
egestas.

Second Skill
Lorem Ipsum Dolor Sit Amet
Nunc viverra imperdiet enim

Third Skill
• Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas porttitor congue
massa. Fusce posuere, magna sed pulvinar
ultricies, purus lectus malesuada libero, sit
amet commodo magna eros quis urna.
• Nunc viverra imperdiet enim. Fusce est.
Vivamus a tellus.
• Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac
turpis egestas. Proin pharetra nonummy
pede. Mauris et orci.

First Lesson
Summary
ultricies, purus lectus malesuada libero, sit
amet commodo magna eros quis urna.
Vivamus a tellus.
• Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac
turpis egestas.

Course Progress
Lesson 1
Lorem ipsum
dolor sit amet
Lesson 2
Lorem ipsum
dolor sit amet
Lesson 3
Sed ut
perspiciatis unde
Lesson 4
Lorem ipsum
dolor sit amet
Lesson 5
Sed ut
perspiciatis unde

Lorem Ipsum Dolor
massa.
Vivamus a tellus.
• Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas.
Proin pharetra nonummy pede. Mauris et orci.

Lorem Ipsum
ultricies, purus lectus malesuada libero, sit amet
commodo magna eros quis urna.
Vivamus a tellus.
• Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas.
Proin pharetra nonummy pede. Mauris et orci.

Lorem
Ipsum Text
consectetuer adipiscing elit.
massa. Nunc viverra imperdiet
enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi
tristique senectus et netus et
malesuada fames ac turpis
egestas. Proin pharetra nonummy
pede. Mauris et orci.

THANK YOU!
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas porttitor congue massa.

Html basics-auro skills

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Html basics-auro skills

Similar to Html basics-auro skills (20)

Recently uploaded

Recently uploaded (20)

Html basics-auro skills