Intro to HTML 4.01 Instructor: Dawn Friedman The Fuse Factory Electronic and Digital Arts Lab 09.16.09
Sep 10, 2014
Intro to HTML 4.01
Instructor: Dawn Friedman
The Fuse Factory Electronic and Digital Arts Lab
09.16.09
Workshop Outline
Presentation: How a web site works (understanding elements and tags: the DNA of HTML)
Presentation part 2: Rules “beautiful” HTML code adheres to
Hands on exercise: Getting started in HTML
09.16.09
What is HTML?
Hyper Text Markup Language Hyper: You can go anywhere and
everywhere on a browser Text: You are working primarily with text Markup: The code necessary for making the
HTML readable by a browser Language: Refers to the specific syntax of a
programming or scripting language
09.16.09
What is HTML?
HTML is a markup (or scripting) language - not a programming language
A markup language contains markup tags that describe how the text is to be formatted
09.16.09
09.16.09
What is HTML?
In the same way that proofreader marks help editors format an essay, HTML tells browsers how to format your page
09.16.09
HTML vs. CSS HTML for content (think of a scaffold), CSS
for presentation (color, fonts, advanced layout)
Many HTML elements and attributes declaring colors, fonts, background, etc. are deprecated
Deprecated means the code will not be (or is not) supported by the most recent versions of HTML and web browsers
09.16.09
What is a Web Browser? A web browser is a computer application that
does two things: It goes to a web server on the internet and
requests a page, so it can pull the page through the network and into your machine
It interprets the HTML elements and tags within the page in order to display it on the screen as the page’s creator intended
09.16.09
How a Web Browser Works
09.16.09
Viewing the Page Source Viewing the page source is like popping up
the hood of a car to look at the engine Don’t be intimidated by the code! It will become more familiar with practice Viewing source code is a great way to
learn Check out:
www.w3schools.com/html/html_intro.asp
09.16.09
Elements and tags
09.16.09
<title>This is a title</title>
Elements and tags
09.16.09
<title>This is a title</title>
All of this is an element
Elements and tags
09.16.09
<title>This is a title</title>
This is a start tag
Elements and tags
09.16.09
<title>This is a title</title>
And this is an end tag
09.16.09
What Does HTML Look Like?
Recommended Text Editors (Windows)
Notepad++ Caditor GNU Emacs Crimson Editor ConTEXT SciTE Komodo Edit jEdit
09.16.09
Recommended Text Editors (Mac)
Bluefish Editor Text Wrangler Smultron GNU Emacs Komodo Edit jEdit
09.16.09
HTML Toolbox: Lists and Links Text links Image links Open link in a new browser window or tab Page anchors Email links Ordered lists Unordered lists
09.16.09
HTML Toolbox: Sample Tags <a href> (link tag) <img src> (image tag) <mailto:> (email link tag) <table> (to create a table) <ol> (ordered list opening tag) <ul> (unordered list opening tag)
09.16.09
Validating Your HTML
Making sure your HTML is “clean” HTML errors are not necessarily
reflected in the appearance of your page http://validator.w3.org http://htmlhelp.com/tools/valet/ Firefox add-ons
09.16.09
Special HTML Characters
HTML renders them with numeric or character encoding so that they can be included in the document properly
There are several characters that should not be left unencoded
Left unencoded, they can confuse the browser and not show up correctly
09.16.09
Special HTML Characters
Less-than sign: < Greater-than sign: > Ampersand: & Quotation marks “ ”
09.16.09
Special HTML Characters Done Right
Less-than sign: & it; Greater-than sign: & gt; Ampersand: & amp; Quotation mark: & quot Full list of special characters: degraeve.com/reference/specialcharacters.php
09.16.09
Skills Supplementing HTML
XHTML CSS Javascript JQuery Moo Tools Flash PHP CMS (Content Management System)
09.16.09
Difference Between HTML and XHTML Since 2000, W3C recommendations
based on XML Provides more robust and rigorous
documentation All tags must be closed All attributes have to be in quotes All lower case
09.16.09
What Beautiful HTML CodeLooks Like DOCTYPE properly declared Tidy head section Body ID’ed Semantically clean menu Important content first
css-tricks.com/what-beautiful-html-code-looks-like/
09.16.09
What Beautiful HTML CodeLooks Like DOCTYPE properly declared Tidy head section Body ID’ed Semantically clean menuwebdesignfromscratch.com/html-css/semantic-html.php
Important content first
09.16.09
What Beautiful HTML CodeLooks Like Proper ending tags Code is tabbed into sections Hierarchy of header tags Content, content, content No styling! Leave it to CSS!
09.16.09
09.16.09
http://css-tricks.com/
what-beautiful-html-code-looks-like/
09.16.09
What Beautiful HTML CodeLooks Like
Now on to part two: The hands-on make your first web page with HTML part!
09.16.09