HTML: HyperText Markup Language

The Language of The Web HTML:HyperText Markup Language

TheWebHasBecomeThe Universalform ofCommunication!

How Does the Web Work? To make Web pages, you create files written in HTML and place them on a Web server Web Server Once you put your file on a Web server, any browser can retrieve it over the internet The HTML in your web page tells the web browser how to display the page

The server is just a computer connected to the Internet waiting for requests from browsers “I need the HTML file “Starbuz” What does the Web server do? Each server stores HTML files Found it, here ya go

<html> <head> <title>Funville Dance</title> </head> <body> <h1>Welcome to Funville Dance Club</h1> <p> Join us any evening for a night of fun, conversation, and maybe a game or two of <em>Dance Dance Revolution</em> Wireless accessis always provided </p> </body> </html> What you write (HTML)

Tags • An HTML document defines content and layout with tags < > • Tags – comprised of elements inside angle brackets < > • Indicate – The start and end of a set of instruction • Spaces – there should be no spaces in a tag

Tags affect the text they enclose • <p> Join us any evening for a night of fun, conversation, and maybe a game or two of • <em>Dance Revolution</em>. Wireless access is always provided </p> • The <p> tag begins a paragraph • The </p> ends the paragraph • The <em> and </em> Emphasizes the words in between

4 main document tags: • <html> - tells the browser that what’s to follow is HTML • <head> - title, information not displayed in the browser • <title> - displayed in the title bar of the browser window – should be descriptive • <body> the web content (text, graphics etc.)

For Every Opening tag, there is an Ending tag • <html> </html> • <head></head> • <title></title> • <body></body> The / indicates the end of an instruction

What program do you use for HTML? • A Text Editor – Such as Note Pad • TO DO: • Start Button • Accessories • Note Pad

Viewing your web page? • You need to check what your web page looks like after you apply the tags You do this Through a Web Browser • TO DO • Navigate to your saved file in your folder, • Rt click on the file • Select Open With

Lets See What we can do! Open Notepad and type the following: • StarbuzzCoffee Beverages • House Blend, $1.49 • A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala • Mocha Café Latte, $2.35 • Espresso, steamed mild and chocolate syrup • Cappuccino, $1.89 • A mixture of espresso, steamed milk and foam. • Chai Tea, $1.85 • A spicy drink made with black tea, spices, milk and honey

Saving your work….. • File Save AS…. • First create a “starbuzz” folder for all your Starbuzz related files • Click on the newly created “starbuz” folder • Now your are going to save your document IMPORTANT!!!! • Save as index.html • In the “Save as Type” select All Files • ALWAYS SAVE THE FIRST PAGE OF YOUR WEB SITE AS INDEX.HTML

Taking your page for a Test drive… • Open your file in the Browser Window TO DO: • Navigate to the Starbuzz folder • Click on the file with the IE symbol • Success!!! • Although the results are a little…uh..unsatisfying. • That is because all you’ve done so far is go through the mechanics of creating a page and typing only content of the web page • WHAT DO WE HAVE TO DO?

Markup your text……… • You Mark up your text with TAGS! TAGS • Give your page structure • Enhance your text

ADD YOU <html> TAGS <head> <title>Strbuzz Coffee</title> </head> <body> <h1>Starbuzz Coffee Beverage</h1> <h2>House Blend, $1.49$</h2> <p>a smooth, mold blend of coffees from Mexico, Bolivia and Guatemala.</p>

Continued… <h2>Mocha Café Latte, $2.35</h2> <p>Espresso, steamed mild and chocolate syrup.</p> <h2>Cappuccino, $1.89</h2> <p>A mixture of espresso, steamed mild and foam.</p>

And still continued…. <h2> Chi Tea, $1.85</h2> <p>A spicy drink made with black tea, spices, mild and honey.</p> </body> </html>

What does Starbuzz look like Now? ?

HTML: HyperText Markup Language