Download Presentation - The PPT/PDF document "Hypertext Markup Language (HTML)" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Presentation on theme: "Hypertext Markup Language (HTML)"— Presentation transcript:
Hypertext Markup Language (HTML)
Created by Sarah Dooley & Amanda Foster
Edited and presented by
September 9, 2014
Improve the Look of Your Web Page with CSS
, September 16, 7-8 PM
Advanced HTML & CSS, September 23, 7-8PM
What is HTML?
HTML stands for
Hypertext: linking to content
Markup language: defining the
Paired with CSS, to define how this structure is
Web browsers read this markup language (HTML and CSS) and interpret the instructions given to display the webpage
is the default file name for the homepage/main directory of any website
When you visit a site like
, the web server looks within the directory for the default file to display even if you don’t type out the full file name
Without this page, users will either see a directory listing of your website files or an error
Read more here
How to name files
As always think about your users when naming files since they’ll have to type in your URLs
KISS principle = Keep it simple, stupid!
Use lowercase letters
Do not use spaces, instead use underscores (_) or dashes (-) to represent spaces
Use the proper extension such as .html or .css
Using HTML to Create Web Content
HTML uses tags to mark up contentEach tag (usually!) has an opening tag…<p>…and a closing tag</p>
DOCTYPE HTML><html> <head><title>My first page</title> </head> <body><h1>My First Heading</h1><p>My first paragraph.</p> </body></html>
= Unordered list (bulleted)<ol> = Ordered list (numbered)<li> = List element
Try it out!
You can add more information to your tags with attributes.
This is a link
An attribute consists of a name and a value.
Format: use quotation marks around the value. Use lowercase letters for the whole tag
Common Tags, Part 3
<img src=“images/puppy.jpg” alt=“Fluffy puppy on hardwood floor” />
href=“http://www.link.com”>This is a link!</a>
I want a break after this line<br><br />
Place all images in a folder within your website folder titled “images” Example: <img src=“images/puppies.jpg” width=“500” height=“300” alt=“Golden Retriever Puppies”/>Every image you include on your website should include attributes for:SourceAlternative Display Name(Can also include width and height)
Sometimes you’ll have one set of tags inside another:
. Oh wait, I want a
If so, close the tags in the reverse of the order you opened them
Inline vs. Block
A block element: “takes up the full width available, and has a line break before and after it”*Block elements include <h1> through <h6>, <p>, and <ul>An inline element: “only takes up as much width as necessary, and does not force line breaks”*Inline elements include <a>, <br />, and <img />Note: Inline elements should be placed within block elements, not vice versa