HTML - Web Design & Publishing

Transcript HTML - Web Design & Publishing

HTML AND WEB DESIGN
PRESENTED
BY:
CARY- ANNE
WHAT WE’LL COVER
• HTML
• Browsers
• Tags: What are they?, Common Tags
• Lists
• Links and Anchors
• Images
• DIVs
• Validation
WHAT IS HTML?
Hyper Text Markup Language – the building blocks of web pages
HTML documents contain plain text (what you want displayed)
and HTML tags (instructions on how to display text)
HTML Document = Web Page
Many HTML Documents = Web Site
Web browser (Firefox or Chrome, for example) reads the HTML
document and displays it to user
WEB BROWSERS
• The .html file extension tells the browser that it is reading an
HTML document
sample_index.html
NOW, we can:
1. Download resume.txt (right click and save as) from:
http://tinyurl.com/htmlbootcamp
2. Open resume.txt in notepad++ (PC) or TextEdit (mac)
3. Save the file to the desktop as resume. html – be sure to
change the file extension!
WHAT IS A TAG?
Each tag has a dif ferent meaning/gives browser different
instructions for how to display content
Keyword surrounded by angle brackets
Most tags come in pairs
• Opening/start tags =>
• Closing/end tags
=>
<html>
</html>
COMMON TAGS
• <html> - html document goes here </html>
• <head> - metadata
• <title> - this is the info that appear s in the browser tab; par t of the
<head>
• <body> - contains the content of the page that is displayed in the
browser
• <h1> - heading, displayed large and bold
• <h2> - second level heading
• <h3> - third level heading
• … <h6>
• <p> - each paragraph framed by this tag
• <strong> - bold
• <em> - italics
Look up tags that you don ’t know at W3 Schools Web site:
http://www.w3schools.com/tags/default.asp
For now, just refer to your trusty handout.
HTML TAG RULES
<opening_tag>surround the appropriate text </closing_tag>
<p>This is sentence one in my sample paragraph.
This is sentence two an the following text
<strong>bold</strong>.</p>
As it appears in the browser:
This is sentence one in my sample paragraph. This is sentence
two and the following text is bold.
Tags should nest! First in, last out (FILO)
LISTS
There are 2 kinds of lists in HTML:
1. Unordered lists - which denotes each item with bullet points
Example:
<ul> Begin your unordered list
<li>Item</li> Every list item has its own tag
<li>Item</li>
<li>Item</li>
</ul> Close your unordered list
LISTS (CONT’D)
When viewed in your browser, your unordered list would look like
this:
 Item
 Item
 Item
LISTS (CONT’D)
2. 0rdered lists - which rank items by denoting each list item
with a number.
Example:
<ol> Begin your ordered list
<li>Item</li> Every list item has its own tag
<li>Item</li>
<li>Item</li>
</ol> Close your ordered list
ORDERED LISTS
When viewed in your browser, your ordered list would look like
this:
1.
2.
3.
Item
Item
Item
ADDING LINKS AND ANCHORS
<a> = link tag, or ‘anchor’ tag requires a closing tag. The
anchor element can be used to:
1. Create a link to another document, including web page
documents, by using the href attribute
2. Create a link to generate an email message
<a href=“http://www.google.com” title=“google”>link to
google</a>
 Attributes: href and title
 Give the browser extra information, like where it should go when a
user clicks
ADDING IMAGES
<img> is a self-closing tag and requires the source attribute
(src=“wherever_the_image_is_from”)
Tags can have multiple attributes:
< img src=“http://stylishcuisine.com/wp content/uploads/oatmeal-choc-chip-cookies.jpg” alt=“Picture
of oatmeal chocolate chip cookies in an orange serving dish ”
/>
alt attribute is important for accessibility.
COMMENTS: YOUR NEW BEST FRIEND
Comments - blocks of text that do not get read or displayed by the
browser
Valuable for:
1. Writing notes
2. Making code easier to read
3. Removing chunks of code temporarily
Open “”
Ex.

DIVS AND SPANS
 These two tags do not style things on their own. They are just
for grouping and allowing reuse of styling via CSS.
 Usually include classes and ID attributes to enable CSS styling…
 <div> tags: indicate a division or section of an HTML
document
 Used to group things together for styling purposes (CSS!)
 Block-level element
 <span> tags: inline element allowing you to style the content
inside the span separately from the rest of the content
VALIDATION
 Running your code through a validator will reveal
errors and information about accessibility
 Validator: http://validator.w3.org/
 Check for broken links:
http://validator.w3.org/checklink
RESOURCES
 W3schools: http://www.w3schools.com/
 Tutorials and reference for HTML
 Usability.gov: http://www.usability.gov/
 Guidelines for usability
 iSchool Tutorials:
 http://www.ischool.utexas.edu/technology/tutorials
UPLOADING FILE TO SERVER
1. Open SSH Secure File Transfer Client on PC or
Fetch on a Mac
2. Log into login.ischool.utexas.edu
3. Drag the HTML file that you have created into your
public_html folder
4. View your page in a browser at the URL:
http://www.ischool.utexas.edu/~username/filename.h
tml

HTML - Web Design & Publishing

Transcript HTML - Web Design & Publishing

Directory