Lecture1.2_CS381_ReviewHTML&CSS.pptx - 1 COMPSCI 381 JavaScript and DHTML Instructor Tina Y Cao Lecture1.2 Overview of HTML 5 and CSS 3 HTML

Lecture1.2_CS381_ReviewHTML&CSS.pptx - 1 COMPSCI 381...

This preview shows page 1 - 14 out of 44 pages.

COMPSCI 381 JavaScript and DHTML Instructor: Tina Y. Cao Lecture1.2: Overview of HTML 5 and CSS 3 1
Image of page 1
HTML Overview HTML (HyperText Markup Language) a computer language that is used to create documents displayed on the World Wide Web. HTML has two parts HT – Hypertext (enables the linking of documents) ML – Markup Language (helps formatting documents to ensure universal readability) The latest version of HTML is HTML 5 2
Image of page 2
Hypertext 3
Image of page 3
Unformatted Document with Markup 4 tle, Bold and center New paragraph, Left & right justified Heading, Bold and left justified Heading, Bold and left justified Bold Bold New paragraph, Left & right justified New paragraph, Left & right justified Insert group meeting image
Image of page 4
5
Image of page 5
Principal Components of a Web Page A web page in HTML is made of 3 key components Text content The actual headers and paragraphs that appear in a page References References to complex content such as links, images, flash, animation, etc. Markup Instructions on how the content and references should be structured and displayed 6
Image of page 6
Principal Components of a Web Page Web pages written in HTML also include other information such as type of language in which text was written , key words , and meta information These information are not visible on the page , but help construct or support a web page 7
Image of page 7
HTML markup HTML is a markup language using tags (and attributes ). Tag consists of angle brackets “ <> ” enclosing the name of an element Closing tag has a forward slash before the tag name <p> This is nice! </p> 8 Opening/Start Tag Closing/End Tag HTML element
Image of page 8
HTML markup HTML elements Identify different parts of a web page (heading, paragraph etc.) Typically, elements have an opening tag and a closing tag with content in between. A few HTML elements can have empty content Empty elements are closed in the start tag (e.g., <br>) < element-name attr =“ value > Most elements including some empty elements can have attributes 9 < element-name attr =“ value > text content < /element-name >
Image of page 9
HTML markup Attributes provide additional information about an element are always specified in the start tag most of the attributes, come in name/value pairs like: name=“value” For example, the following is an image element (an empty element) in a HTML file 10 <img src =“ bird.jpg width =“ 300 > Element name Attribute 1 Attrib u te 2
Image of page 10
<a href =“ > This is a link </a> HTML markup Attributes Another example, the following is a hyperlink element (an non-empty element) in a HTML file 11 Element name Attribute
Image of page 11
HTML Elements Elements can be nested (parents and children) 12 For example, <div> <p> Let’s have a break. </p> <p> Please come back in <b> 5 </b> mins. </p> </div>
Image of page 12
Practice 1.3 Download “ exampl1.zip ” from week-2 page in Canvas course site, and then unzip the zip file. It includes 3 folders: css, images, js, and 1 html file Open the “add-content.html” file in a text editor (e.g., Textpad, Notepad++), point out html elements that you saw in the file.
Image of page 13
Image of page 14

You've reached the end of your free preview.

Want to read all 44 pages?

  • Fall '09

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes