1 / 20

Introduction to HTML: Building Websites with Lego Robot Design

This introduction to HTML covers the essential elements for designing and building websites. HTML (HyperText Markup Language) is the primary language of the internet, defining webpage content and structure. Learn about HTML syntax, including the importance of tags and attributes, document hierarchy, and provide examples like the "Hello World" page. Additionally, delve into CSS (Cascading Style Sheets) for styling webpages, and discover common HTML tags like paragraphs, headers, and links. Enhance your web development skills with practical resources and examples.

eshe
Download Presentation

Introduction to HTML: Building Websites with Lego Robot Design

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 Introduction CS 1020 – Lego Robot Design

  2. Building Websites HTML (HyperText Markup Language) • The dominate language of the internet • Describes a webpage’s content • Controlled by the World Wide Web Consortium (W3C) • In practice, affected by Browser compatibility CSS (Cascading Style Sheet) • Describes a webpage’s presentation

  3. Tag Syntax HTML tags include: • A start tag • An optional attribute name/value pair • Content affected by the tag • A closing tag <tag-name attribute-name=“attribute-value”> ... Content ... </tag-name>

  4. Document Syntax HTML documents are made up of a hierarchical “tree” of tags structuring content. Correct hierarchy: <p> The following text is <b> bold </b> </p> Incorrect hierarchy: <p> The following text is <b> bold </p> </b>

  5. Hello World Example <!DOCTYPE html> <html> <head> <title> Hello World Page </title> </head> <body style=“color: blue”> <p> Hello World! </p> </body> </html>

  6. Hello World Example <!DOCTYPE html> <html> <head> <title> Hello World Page </title> </head> <body style=“color: blue”> <p> Hello World! </p> </body> </html> The !DOCTYPEtag informs the browser of the webpage’s language.

  7. Hello World Example <!DOCTYPE html> <html> <head> <title> Hello World Page </title> </head> <body style=“color: blue”> <p> Hello World! </p> </body> </html> The html tags enclose all of the page’s content.

  8. Hello World Example <!DOCTYPE html> <html> <head> <title> Hello World Page </title> </head> <body style=“color: blue”> <p> Hello World! </p> </body> </html> The head tags contain extra information about the webpage.

  9. Hello World Example <!DOCTYPE html> <html> <head> <title> Hello World Page </title> </head> <body style=“color: blue”> <p> Hello World! </p> </body> </html> The title tags tell the browser the page’s name; often the title is used by the browser to label the window or tab.

  10. Hello World Example <!DOCTYPE html> <html> <head> <title> Hello World Page </title> </head> <body style=“color: blue”> <p> Hello World! </p> </body> </html> The body tags contain the content displayed on the webpage. The style attribute changes the page’s text color.

  11. Hello World Example <!DOCTYPE html> <html> <head> <title> Hello World Page </title> </head> <body style=“color: blue”> <p> Hello World! </p> </body> </html> Finally, the p tags surround paragraphs of text.

  12. A slightly less contrived example… <html><head> <meta http-equiv=“content-type” content=“text/html; charset=UTF-8”> <title>Empty Page</title> </head><body> I have not yet set up my home page. </body></html>

  13. Common Tags • Headers <h1>, <h2>, <h3>, ... • Italics <i> • Boldface <b> • Line breaks (singleton tag) <br> • Comments (singleton tag) <!-- ... -->

  14. Links The link tag: <a href=“http://www.cs.middlebury.edu”> Middlebury CS! </a> The hrefattribute: • Use full page address with “http://” to access other website’s pages • Use only the page’s filename to access other html pages saved in the same directory

  15. Images The image tag: <imgsrc=“racer1_thumb.jpg”> The srcattribute: • Use full page address with “http://” to access other website’s pages • Use only the page’s filename to access other html pages saved in the same directory

  16. Styling HTML with CSS Tags can be stylized by providing extra information in a style attribute. <body style=“color: blue”> <p> Hello World! </p> </body> Technically, the style attribute applies CSS styling, which is a whole language itself.

  17. Style Attribute Syntax The style attribute consists of a list of CSS property/value pairs, deliminated by semicolons. <tag style=“property: value; property: value; ...”> ... Content affected by stylization ... </tag>

  18. Common CSS Properties • Text color color: blue; • Background color background-color: white; • Height & width height/width: 600px; • Text alignment text-align: center/right/justify; • Text size font-size: 30px;

  19. More on Web Development • Tables http://w3schools.com/html/html_tables.asp • Lists http://w3schools.com/html/html_lists.asp • Color names http://w3schools.com/cssref/css_colornames.asp • More CSS properties http://w3schools.com/css/default.asp • Check out other student’s webpages http://www.cs.middlebury.edu/~username

  20. HTML IntroductionColby Horn (chorn@middlebury.edu) CS 1020 – Lego Robot Design – Winter 2013

More Related