Introduction to Html by Ankitkumar Singh

Get Set Go With HTML Ankitkumar Singh Presented By :

About Speaker Ankitkumar Singh A creative programmer, community manager, open source contributor and a mentor. @TheDevAnkit

Why I’m DoingThis Ankitkumar Singh

What I want fromYou Money……. Lots of money

What I want fromYou Just a Help Help Each other to become great.

•What is HTML •What is full form HTML •How to used HTML •Why to learn HTML •Tags And Demo Agenda for the Day

<!DOCTYPE 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> OUTPUT- BASIC SYNTAX

<html> <head> <title>Heading Example</title> </head> <body> <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> OUTPUT- <h6>This is heading 6</h6> </body> </html> HEADINDTAG

<!DOCTYPE html> <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> </body> </html> OUTPUT- PARAGRAPHTAG

<!DOCTYPE html> <html> <head> <title>Line Break Example</title> </head> <body> <p>Hello You delivered your assignment ontime. <br /> Thanks<br /> Mahnaz </p> </body> </html> OUTPUT- BREAKTAG

<!DOCTYPE html> <html> <head> <title>Centering 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> OUTPUT- CENTERTAG

<html> <head> <title>Horizontal Line Example</title> </head> <body> <p>This is paragraph one & should be on top</p> <hr /> <p>This is paragraph two and should be at bottom</p> </body> </html> OUTPUT- HORIZONTAL LINETAG

<!DOCTYPE html> <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> OUTPUT- HTMLTAGVs ELEMENT

<!DOCTYPE html> <html> <head> <title>AlignAttribute 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> OUTPUT- HTML ATTRIBUTES

•Id-<p id = "html"> This para explains what is HTML</p> •Title-<body> <h3 title = "Hello HTML!">Titled HeadingTag Example</h3> </body> Style- <body> <p style = "font-family:arial; color:#FF0000;">Some text...</p> </body> CORE ATTRIBUTES

•BOLDTEXT- <b>...</b> •ITALICTEXT- <i>...</i> •UNDERLINEDTEST- <u>...</u> •STRIKETEXT- <strike>…</strike> •SUPERSCRIPTTEXT- <superscript >…</ superscript> •SUBSCRIPTTEXT-<subscript>…</subscript > •INSERTEDTEXT- <ins>…</ins> •DELETEDTEXT- <del>…</del> •LARGERTEXT- <big>...</big> •SMALLERTEXT- <small>...</small> HTML FORMATTING

•<div></div>-allows to group several elements on webpage •<span></span>-allows to group inline elements only <p>This is the example of <span style = "color:green">span tag</span> and the <span style = "color:red">div tag</span> alongwith CSS</p> OUTPUT- GROUPINGTAGS

<html> <head> <title>DivTag Example</title> </head> <body> <div id = "menu" align = "middle" > <a href = "/index.htm">HOME</a> | <a href = "/about/contact_us.htm">CONTACT</a> | <a href = "/about/index.htm">ABOUT</a> </div> <div id = "content" align = "left" bgcolor = "white"> <h5>Content Articles</h5> <p>Actual content goes here.....</p> </div> </body> </html> OUTPUT:-

<!DOCTYPE html> <html> <head><title>Set ImageWidth and Height</title> </head> <body> <p>Setting image width and height</p> <img src = “image path" width = "150px" height = "200px" border = "3" align = “left"/> </body> </html> OUTPUT- IMAGETAG

<!DOCTYPE html><html> <head> <title>HTMLTableCellpadding </title> </head> <body> <table border = "2"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Sona </td> <td>5000</td> </tr> <tr> <td>Mona</td> <td>7000</td> </tr> </table> </body> </html> OUTPUT- TABLETAG

• Cellspacing and cellpading attributes • Colspan and rowspan attributes • Table background • Table width and height TABLE ATTRIBUTES

<table border = "1" cellpadding = "5" cellspacing = "5" bordercolor = "black" bgcolor = “white" width="400" height="150"> <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>

•<ul>-unordered list-have no special order •<ol>ordered list-have a special order •<dl>-definition list-ideal way to present a glossary, list of terms,etc •Definition List makes use of following four tags. <dl> − Defines the start of the list <dt> − A term <dd> −Term definition </dl> − Defines the end of the list LISTS

<!DOCTYPE html><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> Output- ORDERED LISTTAG

<!DOCTYPE html> <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> Output- UNORDERED LISTTAG

•UNORDERED LIST <ul type = "square"> <ul type = "disc"> #default <ul type = "circle"> •ORDERED LIST <ol type = "1"> - Default-Case Numerals. <ol type = "I"> - Upper-Case Numerals. <ol type = "i"> - Lower-Case Numerals. <ol type = "A"> - Upper-Case Letters. <ol type = "a"> - Lower-Case Letters. TYPE ATTRIBUTE OF LIST

<!DOCTYPE html><html> <head><title>Hyperlink Example</title> </head> <body><p>Click following link</p> <a href = "https://www.xyz.com" target = "_self">Hackathon</a> </body> </html> OUTPUT- TEXT LINK

<!DOCTYPE html><html> <head> <title>Image Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href = "https://www.xyz.com" target = "_self"> <img src = “image path" border = "0"/></a> </body> </html> IMAGE LINK

•HTML Background with Colors <tagname bgcolor = "color_value"...> •HTML Background with Images <tagname background = "Image URL"...> BACKGROUNDTAG

<body> tag uses below attributes to set color- •bgcolor − sets a color for the background of the page. •text − sets a color for the body text. •alink − sets a color for active links or selected links. •link − sets a color for linked text. •vlink − sets a color for visited links COLOR TAG

Color Name-specify color name directly W3C Standard 16 Colors COLOR CODING METHOD

Hex Code-A six digit code that represents color. COLOR CODING METHOD

Color decimal or percentage values- This value is specified using the rgb( ) property. COLOR CODING METHOD

•HTML <font> tag is use to add style, size, and color to the text •<font> tag has three attributes size,color,face- •<font size=“1”>Hackathon</font> Size ranges between 1 to 7-default is 3 •Relative Font Size-You can specify how many sizes larger or smaller than present size <font size = "+n"> or <font size = "−n"> •<font color = "red">This text is red</font> •<font face=“Verdana”>Hackathon</font> FONTTAG

Form Syntax- <form action = "Script URL" method = "GET|POST"> form elements like input, textarea etc. </form> There are various HTML form controls- •Text Input Controls •Checkboxes Controls •Radio Box Controls •Select Box Controls •File Select boxesSubmit and Reset Button HTML FORMS

•CSS saves a lot of work. It can control the layout of multiple web pages all at once. •CSS is used to control the style of a web document in a simple and easy way. •CSS is the acronym for "Cascading Style Sheet“. •Application of CSS- •CSS saves time •Pages load faster •Easy maintenance •Multiple Device Compatibility •Global web standards CSS

Selector Declaration h1 {font-size:12px;color:blue;} • Selector points to the HTML element you want to style. • The declaration block contains one or more declarations separated by semicolons. CSS SYNTAX

•CSS can be added to HTML elements in 3 ways: •Inline - by using the style attribute in HTML elements •Internal - by using a <style> element in the <head> section •External - by using an external CSS file STYLING HTMLWITH CSS

•Inline CSS- <h1 style="color:blue;">This is a Blue Heading</h1> •Internal CSS- <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

•External CSS- <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> body { background-color: blue; } h1 { color: blue; } p { color: red; } External CSS file

Introduction to Html by Ankitkumar Singh

More Related Content

What's hot

Similar to Introduction to Html by Ankitkumar Singh

Recently uploaded

Introduction to Html by Ankitkumar Singh