HTML Basics
Transcript of HTML Basics
![Page 1: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/1.jpg)
Webdesign Basics
![Page 2: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/2.jpg)
What is the Internet?
![Page 3: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/3.jpg)
Most people use a
browser on their
computer to view
webpages.
![Page 4: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/4.jpg)
Wikipedia on Safari Mobile, iPhone
Wikipedia on a regular cellphone
iPhone applications Widgets
![Page 5: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/5.jpg)
3 Layers
HTML (structure)
CSS (presentation)
JavaScript (interaction)
![Page 6: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/6.jpg)
HTML
HyperText Markup Language
Files usually have .htm or .html as extension
![Page 7: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/7.jpg)
Basic Structure of an HTML Document
• Doctype
• Head
‣ Title
‣ Metadata
• Body
‣ Content
![Page 8: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/8.jpg)
Basic Structure of an HTML Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Hello World</title></head><body> <h1>Hello World</h1></body></html>
![Page 9: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/9.jpg)
Tags (HTML Elements)
Container Elements
<tag>text or other elements go here</tag>start tag + content + end tag
Empty Elements
<tag />single tag
![Page 10: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/10.jpg)
Headings
<h1> Heading Level 1 (most important)
<h2><h3><h4><h5><h6> Heading Level 6 (least important)
![Page 11: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/11.jpg)
Headings
<h1>This is the main heading</h1><h2>This is a subheading</h2>
![Page 12: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/12.jpg)
Paragraphs
<p>This is a paragraph.</p><p>This is another paragraph.</p>
![Page 13: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/13.jpg)
Forced Line Breaks
<p>This is a very very long line of text.<br />This piece of text is forced to the next line.</p>
![Page 14: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/14.jpg)
Unordered Lists
<h1>Colors</h1><ul>
<li>Blue</li><li>Red</li><li>Orange</li><li>Green</li>
</ul>
![Page 15: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/15.jpg)
Ordered Lists
<h1>My Favorite Movies</h1><ol>
<li>Star Wars Episode IV: A New Hope</li><li>A Nightmare On Elm Street</li><li>Fritz the Cat</li><li>Kids</li>
</ol>
![Page 16: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/16.jpg)
Definition Lists
<dl><dt>CSS</dt><dd>Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in HyperText Markup Language.</dd>
</dl>
![Page 17: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/17.jpg)
Emphasis
<p>Within a larger body of text, a piece in <em>italics</em> does not stand out much; instead, it signifies a context difference only <em>while</em> the text is being read.</p>
http://en.wikipedia.org/wiki/Emphasis_(typography)
![Page 18: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/18.jpg)
Strong Emphasis
<p>By contrast, <strong>boldface</strong> makes text darker than surrounding text. With this technique, the emphasized text strongly stands out from the rest.</p>
http://en.wikipedia.org/wiki/Emphasis_(typography)
![Page 19: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/19.jpg)
First Assignment
This will be a collaborative project.
The end product will be a small website.
Each one of you will make one page.
You will learn about:
• Structuring text (HTML)
• Typography for the web (CSS)
• Art Direction for the web (CSS + Photoshop techniques)
![Page 20: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/20.jpg)
Part I: Structuring Text
• Choose a page from Wikipedia with a lot of text.
• Analyse the text and remove all unnecessary items ([footnotes], [edit],
image captions, ...).
• Add structure to the text using the html tags you’ve just learned.
![Page 21: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/21.jpg)
The final stuctured text
will look somewhat like
this page.
![Page 22: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/22.jpg)
Software
For the class asignments we will use Firefox
as our main development Browser.
You will also need to install the following add-ons:
• Web Developer by Chris Pederick
• Firebug by Joe Hewitt & Rob Campbell
![Page 23: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/23.jpg)
Software
Install a few other browsers on your computer
• Safari
• Opera
• Chrome (Windows Only)
• Internet Explorer (Windows Only)
• Other less popular browsers: Flock, Camino, …
![Page 24: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/24.jpg)
Software
In class we will use TextWrangler and Vormplus Webtools to
create HTML and CSS files.
http://www.barebones.com/products/TextWrangler/
http://vormplus.info/rmatica/vormplus-webtools
![Page 25: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/25.jpg)
Software
Get a good text editor that supports
syntax highlighting.
Mac OS X
• TextWrangler
• BBEdit
• TextMate
• Espresso
Windows
• Crimson Editor
• Notepad++
• UltraEdit
![Page 26: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/26.jpg)
Questions?
![Page 27: HTML Basics](https://reader034.fdocuments.in/reader034/viewer/2022052523/55561989d8b42ae0238b5006/html5/thumbnails/27.jpg)
Software Demo
Installing Firefox and Add-ons
Installing TextWrangler and Vormplus Webtools
Working with Vormplus Webtools