Hypertext Markup Language (HTML) PowerPoint Presentation, PPT

Hypertext Markup Language (HTML) PowerPoint Presentation, PPT - DocSlides

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. ID: 310860

By giovanna-bartolotta
Watch All docs

Likes : 34
Views : 78

Download this presentation

Click below link (As may be) to get this presentation.

Hypertext Markup Language (HTML)

Download Note - 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.

Presentations text content in 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
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
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 contentEach tag (usually!) has an opening tag…<p>…and a closing tag</p>
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>
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
Document structure
0
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
1
Common Tags, Part 1
<h1>
Heading1
</h1>
<h2>
Heading2
</h2>
<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!
2
Common Tags, Part 2
Example:<ul> <li>Home</li> <li>My Research</li> <li>Experiments</li></ul>
HomeMy ResearchExperiments
<ul>
= Unordered list (bulleted)<ol> = Ordered list (numbered)<li> = List element
Try it out!
3
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
4
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 />
5
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)
6
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
<
?
7
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
*from http://www.w3schools.com/css/css_display_visibility.asp
8
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>
9
Other Cool Stuff HTML Can Do
TablesForms – Great for quizzes!
0
Putting Your Pages
on the Web
1
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
2
3
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,
7-8PM
Feedback
4
5