1 / 20

Intro to HTML

Intro to HTML. HTML. HTML = HyperText Markup Language U sed to define the content of a webpage HTML is made up of tags and attributes. < tag attribute = value >Content</ tag >. Tags. Tags surround content Most tags appear in twos – an opening and a closing tag .

sani
Download Presentation

Intro to HTML

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. Intro to HTML

  2. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes <tagattribute=value>Content</tag>

  3. Tags Tags surround content Most tags appear in twos – an opening and a closing tag <tag>This is the content of the element</tag> Opening tag Content Closing tag

  4. HTML tag <html> Everything in here is part of the html document </html>

  5. Body tag <html> <body> Everything in here is part of the document body. This is what will be displayed in the browser. </body> </html>

  6. Header tags <html> <body> <h1>This is the first header</h1> <h2>This is the second header</h2> … <h6>This is the sixth header</h6> </body> </html>

  7. Paragraph tag <html> <body> <h1>This is the first header</h1> <p>This is a paragraph</p> </body> </html>

  8. Table tag <html> <body> <h1>Here is a table</h1> <table> <tr> <td>100</td> <td>200</td> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> </body> </html> tr = table row td = table data

  9. Image tag <html> <body> <h1>Here is a picture</h1> <imgsrc=“stanford.jpg”> <p>This is Stanford</p> </body> </html> Note: The image tag doesn’t have a closing tag.

  10. Attributes Attributes provide additional information about an element Attributes are defined in the start tag <tagattribute=value>Content</tag>

  11. Image tag revisited <html> <body> <h1>Here is a picture</h1> <imgsrc=“stanford.jpg”> <p>This is Stanford</p> </body> </html> The srcattribute provides additional information about the image element – the location of the image file to be displayed.

  12. Links <html> <body> <h1>Here is a link</h1> <ahref=“www.google.com”>Google</a> </body> </html> The <a> tag defines a link element. The href attribute specifies the link address.

  13. Identifying attributes <h1id=“firstHeader”>Content</h1> The id attribute specifies a unique ID for an element. It can be used with any element. <h1class=“first”>Content</h1> The class attribute specifies that an element belongs to a particular class. It can be used with any element. These identifying attributes will be very important for CSS…

  14. Try it yourself! Open up a new document in a text editor (Sublime, notepad, TextEdit) Copy the following text to the first line of your document Save the document as myFile.html Double click to open myFile.html in a browser Now you can make changes to the document and view the changes by saving then refreshing the open browser window <!DOCTYPE html>

  15. Intro to CSS

  16. CSS CSS = Cascading Style Sheets Used to define how to display HTML elements HTML is the content, CSS is the style CSS rules contain a selector and declarations. Each declaration contains a property and a value. selector { property: value; property: value; } declaration

  17. Selectors A CSS selector is an element, id, class All HTML elements with the specified element type, id, or class will have the property values defined in the declarations h1 { property: value; property: value; } #firstHeader{ property: value; property: value; } .first { property: value; property: value; }

  18. External Style Sheet Separate CSS file linked at beginning of HTML document Used to unify style across many web pages. <html> <head> <linkrel="stylesheet" type="text/css" href=”style.css"> </head> <body> </body> </html>

  19. Internal Style Sheet Contained in <style> tag in header section of HTML document Used for single webpage with unique style <html> <head> <style> h1 {color:red;} #firstHeader{color:blue;} </style> </head> <body> </body> </html>

  20. Inline Style Contained in start tag of HTML element Used to define the style of an individual element Use sparingly! In general, style should be separated from HTML content <html> <body> <h1 style=“color:blue;”>Header</h1> </body> </html>

More Related