1 / 24

HTML and CSS

HTML and CSS. Document Structure. Doctype Declaration. The <!DOCTYPE> Declaration Used by the web browser to understand the version of the HTML used in the document. <!DOCTYPE html> <html> < head> < title>Title of the document</title> </ head> <body>

mbranson
Download Presentation

HTML and CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML and CSS

  2. Document Structure

  3. Doctype Declaration • The <!DOCTYPE> Declaration • Used by the web browser to understand the version of the HTML used in the document <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>

  4. Tags and Elements • Header: h1, h2, h3, h4, h5 • <h1> This is header h1 </h1> • Paragraph: <p></p> • Structures your text into different paragraphs • Break: <br /> • Next line • Center: <center></center> • italics: <i></i> • <p>…..</p> is an element, defined by its starting tag.

  5. Meta Information (meta tag) • This tag is an empty element and so does not have a closing tag but it carries information within its attributes <head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

  6. Comment • <!DOCTYPE html> • <html> • <head> <!– Comment: Document Header Starts --> • <title>This is document title</title> • </head> <!-- Comment: Document Header Ends --> • <body> • <!-- Comment: Document Body Starts --> • <p>Document content goes here.....</p> • <!-- Comment: Document Body Ends, multiline comment • --> • </body> • </html> • Make sure the comment starts with “<!--” and ends with “-->”. No spaces.

  7. Image • <img>: The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag • Provide full path of the image file in src if the image resides in a folder different from where the html resides <!DOCTYPE html> <html> <head> <title>Using Image in Webpage</title> </head> <body> <p>Simple Image Insert</p> <imgsrc="test.png" alt="Test Image" /> </body> </html>

  8. Img tag: Attributes in the tag • Width • Height • Alt • Border • Align <imgsrc="test.png" alt="Test Image" border="3" align="right" width="150" height="100" />

  9. Tables • <tr></tr> • <td></td> • <html> • …………… • <body> • <table border="1"> • <tr> • <td>Row 1, Column 1</td> • <td>Row 1, Column 2</td> • </tr> • <tr> • <td>Row 2, Column 1</td> • <td>Row 2, Column 2</td> • </tr> • </table> • </body> • </html>

  10. List • Unorderd (<ul>): • <ul type="square"> • <ul type="disc"> • <ul type="circle"> • <ul> • <li>Beetroot</li> • <li>Ginger</li> • <li>Potato</li> • <li>Radish</li> • </ul>

  11. List contd. • Ordered (<ol>): • <ol type="1"> - Default-Case Numerals. • <ol type="I"> - Upper-Case Numerals. • <ol type="i"> - Lower-Case Numerals. • <ol type="a"> - Lower-Case Letters. • <ol type="A"> - Upper-Case Letters. • <ol type="1"> • <li>Beetroot</li> • <li>Ginger</li> • <li>Potato</li> • <li>Radish</li> • </ol>

  12. Linking • <a href="Document URL" ... attributes-list>Link Text</a> • <body> • <p>Click following link</p> • <a href="http://www.tutorialspoint.com" target="_self">Tutorials Point</a> • </body>

  13. Target Attributes <a href="http://www.tutorialspoint.com/html/index.htm" target="_blank">Opens in New</a>

  14. Email Tag • <a href= "mailto: abc@example.com">Send Email</a>

  15. Div Tag • <div></div> • Groups various other html tags and apply CSS on group of elements. • Can be used to create webpage layout where we define different parts (Left, Right, Top etc.) of the page using <div> tag. • This tag does not provide any visual change on the block

  16. Div tag example • <div style="color:red"> • <h4>This is first group</h4> • <p>Following is a list of vegetables</p> • <ul> • <li>Beetroot</li> • <li>Ginger</li> • <li>Potato</li> • <li>Radish</li> • </ul> • </div> • <!-- Second group of tags --> • <div style="color:green; font-family:Verdana"> • <h4>This is second group</h4> • <p>Following is a list of fruits</p> • <ul> • <li>Apple</li> • <li>Banana</li> • <li>Mango</li> • <li>Strawberry</li> • </ul> • </div>

  17. Span Tag • An inline element, any CSS attribute can be used (color, font-weight. Etc.) • Can be used to group inline-elements in an HTML document • This tag also does not provide any visual change on the block but has more meaning when it is used with CSS • The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements whereas the <div> tag is used with block-level elements <body> <p>This is <span style="color:red">red</span> and this is <span style="color:green">green</span></p> </body>

  18. Font Tag • <font></font> • Three attributes • Size • Color • Face • To change any of the font attributes at any time within your webpage, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag • You can change one or all of the font attributes within one <font> tag • Use a <basefont> tag to set all of your text to the same size, face, and color

  19. Font Tag • <body> • <font size="1">Font size="1"</font><br /> • <font size="2" Face="Times New Roman" Color="Red" >Font size, face and color</font><br /> • </body>

  20. Cascading Style Sheets (CSS)

  21. External Style Sheets • This style sheet can be used by multiple html files • Create a file named CSS in the same directory where the html file resides. Name it “style.css” • Write the following code in it .red{ color: red; } .thick{ font-size:20px; } .green{ color:green; }

  22. Using External Style Sheet File <!DOCTYPE html> <html> <head> <title>HTML External CSS</title> <link rel="stylesheet" type="text/css" href="/html/style.css"> </head> <body> <p class="red">This is red</p> <p class="thick">This is thick</p> <p class="green">This is green</p> <p class="thick green">This is thick and green</p> </body> </html>

  23. External Style Sheets /*comment: by element*/ body{ font-family: Verdana; width: 550 px; } /*comment: by class*/ .entry{ margin-left: 1 em; margin-bottom: 0.5em; width: 10 em; } /*comment: by id of control*/ #lblFutureValue{ Font-weight: bold; Margin-left: 1em; } • By element: • Element name • By class: • Given class name • By id: • Id of control

  24. Internal Style Sheet • <!DOCTYPE html> • <html> • <head> • <title>HTML Internal CSS</title> • <style type="text/css"> • .red{ • color: red; • } • .thick{ • font-size:20px; • } • .green{ • color:green; • } • </style> • </head> • <body> • <p class="red">This is red</p> • <p class="thick">This is thick</p> • <p class="green">This is green</p> • <p class="thick green">This is thick and green</p> • </body> • </html>

More Related