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:
Slide1
Hypertext Markup Language (HTML)
Created by Sarah Dooley & Amanda Foster
Edited and presented by
Caroline Hallam
September 9, 2014
Slide2
Overview
Today:
HTML
SFTP &
isis
web space
Coming Up
:
Improve the Look of Your Web Page with CSS
, September 16, 7-8 PM
Advanced HTML & CSS, September 23, 7-8PM
Slide3
What is HTML?
HTML stands for
H
yper
T
ext
M
arkup
L
anguage
Hypertext: linking to content
Markup language: defining the
structure
Paired with CSS, to define how this structure is
displayed
Web browsers read this markup language (HTML and CSS) and interpret the instructions given to display the webpage
Slide4
The Homepage
index.html
is the default file name for the homepage/main directory of any website
When you visit a site like
lib.unc.edu
, 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
page
(
Read more here
)
Slide5
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
Slide6
Using HTML to Create Web Content
Slide7
Tags
HTML uses tags to mark up contentEach tag (usually!) has an opening tag…<p>…and a closing tag</p>
Slide8
Document Structure
<!
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!
Slide13
Attributes
You can add more information to your tags with attributes.
<a
href
=“http://www.link.com”>
This is a link
</a>
<
img
src
=“kittens.png” />
An attribute consists of a name and a value.
Tag:
a
Attribute
Name
:
href
Value:
http://
www.link.com
Format: use quotation marks around the value. Use lowercase letters for the whole tag
Slide14
Common Tags, Part 3
<img src=“images/puppy.jpg” alt=“Fluffy puppy on hardwood floor” />
<a
href=“http://www.link.com”>This is a link!</a>
I want a break after this line<br><br />
Slide15
Adding Images
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)
Slide16
Nesting tags
Sometimes you’ll have one set of tags inside another:
<p>
paragraph
paragraph
paragraph
paragraph
paragraph
paragraph
paragraph
paragraph
paragraph
paragraph
. Oh wait, I want a
<a
href
=“http://www.link.com”>
link here
</a>
! paragraph
paragraph
paragraph
</p
>
If so, close the tags in the reverse of the order you opened them
<h2><
em
><a
href
=“http://www.link.com”>
Word
<
?
Slide17
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
