Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML - CAP351

An overview of HTML, exploring elements(tags), attributes, accessibility...
by

Loren Leonard

on 23 January 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML - CAP351

HTML What is HTML? HTML is a markup language derived from SGML. HTML is made up of a series of predefined elements, symbols and properties. Typically we refer to the elements as tags. About Tags (elements) Each tag is enclosed in angle brackets.
Most tags come as a pair, one opening
tag and one closing tag. <a href="contact.html">Contact Us</a>
Notice the pair of opening and closing tags. The Anchor Tag < > Tag Attributes What other tags can you name? <a href="contact.html">Contact Us</a>
What is the "href" part?

href is a tag attribute, essentially a property of a particular tag that can be specified Absolute vs. Relative Paths Absolute Path (starts with protocal)
Link to other Web sites
<a href="http://yahoo.com">Yahoo</a>

Relative link
Link to pages on your own site
<a href="index.htm">Home</a> weuyfghwoeihfowihe Also known as Stand-Alone Tags Self-Closing Tags For example the line break tag <br>
Does not come in pairs. In XHTML self-closing elements must be ended with a "/" like this <br/> <html></html>
<head></head>
<body></body>
<title></title>
<meta>
<h1></h1>
<p></p>
<blockquote></blockquote>
<ul></ul>
<ol></ol>
<li></li>
<dl></dl>
<dt></dt>
<dd></dd>
<div></div>
<img/>
<hr/> There are many types of disabilities that can make using the web more challenging. These include: visual, hearing, motor and cognitive disabilities. Web Accessibility Check! <font> the font tag is an abomination because it does NOTHING to descibe the content and it is easy to replace with CSS http://www.w3.org/TR/html4/index/elements.html Setting Up an HTML5 Page As you know most pages have the following structure:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Page Title</title>
<meta charset="utf-8">
</head>
<body>
... displayed content ...
</body>
</html> Careful with Syntax! HTML5 is more forgiving than XHTML
but I insist that... How Can I Ensure My Code is Correct? tags should be lowercase
use both opening and closed tags Validation Tools Validation tools look at your code and indicate any syntax errors, this is why it is so important to indicate what type of XHTML or HTML you are using because different rules apply to different document types.

http://html5.validator.nu/ Odds and Ends sometimes called entity characters, special characters allow you to display certain things like quotation marks, angle brackets, copyright symbols, for example &copy; File Organization and Paths it is important to understand how files and folders are represented in terms of their paths. Paths "/" - represents going into a folder
/main/subfolder/Sub-SubFolder

"../" - how to go backwards or upwards in the folder structure hierarchy Naming Conventions avoid spaces, replace them with a dash or underscore otherwise you get "%20"
try to be consistant with names, all lowercase is a good choice
some web servers are case sensative (SUNY Cortland example) Don't forget to nest
your tags correctly... <p><strong>Important Message:</strong> Test next week!</p> Special Characters <!-- This won't display on the page --> HTML COmments http://www.doit.wisc.edu/accessibility/video/ScnRdrpt3.mov
HTML5 Developed by WHATWG (2004)
New Standard to replace HTML 4 AND XHTML1
Accepted/Adopted by W3C
W3C drops charter to work on XHTML 2 http://dev.w3.org/html5/spec-author-view/ <video><nav><article><header>
<footer><aside><audio><canvas>
new form controls too!
(sliders/date pickers) New Elements! :) Elements that don't mark up content
but just change how it is displayed
such as: <center><font> Dropped Elements (see ya) technically not SGML based any longer NOTES DTD DTD or Document Type Declaration aren't necassary in HTML5 - because they are technically not based on SGML <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> http://laughingsquid.com/wp-content/uploads/italic_tag.jpg
Full transcript