Hypertext Markup Language (HTML)

Download Report

Transcript Hypertext Markup Language (HTML) 

Hypertext Markup
Language (HTML)
Created by Sarah Dooley & Amanda Foster
Edited and presented by Caroline Hallam
September 9, 2014
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
What is HTML?
⦿ HTML stands for HyperText Markup
Language
• 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
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)
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
Tags
⦿ HTML
uses tags to mark up content
⦿ Each tag (usually!) has an opening tag…
<p>
⦿ …and
a closing tag
</p>
Document Structure
⦿ An
HTML document has a head and a
body
• The head provides information about the document
• The body is where the document’s content goes
<!DOCTYPE HTML>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Document structure
Document Structure
⦿ The
DOCTYPE declaration defines the
document type
⦿ The text between <html> and </html>
describes the web page
⦿ The text between <body> and </body> is
the visible page content
⦿ The text between <h1> and </h1> is
displayed as a heading
⦿ The text between <p> and </p> is
displayed as a paragraph
Common Tags, Part 1
<h1>
Heading1
<h2>
Heading2</h2>
</h1>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
<p>This is first paragraph</p>
<p>This is second paragraph</p>
Try it out!
Common Tags, Part 2
<ul> = Unordered list (bulleted)
<ol> = Ordered list (numbered)
<li> = List element
Example:
<ul>
<li>Home</li>
<li>My Research</li>
<li>Experiments</li>
</ul>
Try it out!
• Home
• My Research
• Experiments
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
• Tag: a
• Attribute
• Name: href
• Value: http://www.link.com
⦿ Format:
a name and a value.
use quotation marks around the value.
Use lowercase letters for the whole tag
Common Tags, Part 3
<a href=“http://www.link.com”>This is a link!</a>
<img src=“images/puppy.jpg”
alt=“Fluffy puppy on hardwood
floor” />
I want a break after this line
<br>
<br />
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:
• Source
• Alternative Display Name
(Can also include width and height)
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<
?
Inline vs. Block
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>
⦿A
inline element: “only takes up as much width as
necessary, and does not force line breaks”*
• Inline elements include <a>, <br />, and <img />
⦿ An
⦿ Note:
Inline elements should be placed within block
elements, not vice versa
*from http://www.w3schools.com/css/css_display_visibility.asp
Linking Between Pages
⦿ Linking
between pages is similar to linking
to external websites.
Linking to a website:
<a href=“http://www.google.com”>Google</a>
Linking between pages:
<a href=“instructors.html”>Instructors</a>
Other Cool Stuff HTML Can Do
⦿ Tables
⦿ Forms
– Great for quizzes!
Putting Your Pages
on the Web
SFTP Software
⦿ SFTP
stands for “Secure File Transfer
Protocol”
⦿ Used to copy a file from your computer to
a server
⦿ In our case, this server is called “isis” and
it hosts your personal UNC web space
⦿ UNC provides free SFTP Clients to get
files from your computer to your isis server
• PC: Secure Shell
• Mac: Fetch or Fugu
Finishing up
⦿HTML resources
⦿UL Design Lab for design assistance
⦿Future skillfUL sessions
• Improve the Look of Your Web Page with
CSS, September 16, 7-8 PM
• Advanced HTML & CSS, September 23, 78PM
⦿Feedback