Cyberbad Where Spam is leading to Phillip Hallam-Baker [email protected].
Hypertext Markup Language (HTML) Created by Sarah Dooley & Amanda Foster Edited and presented by...
23
Hypertext Markup Language (HTML) Created by Sarah Dooley & Amanda Foster Edited and presented by Caroline Hallam September 9, 2014
-
Upload
howard-mcgee -
Category
Documents
-
view
220 -
download
0
Transcript of Hypertext Markup Language (HTML) Created by Sarah Dooley & Amanda Foster Edited and presented by...
Hypertext Markup Language (HTML)
Created by Sarah Dooley & Amanda FosterEdited 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
<!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
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</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!
Common Tags, Part 2
Example:<ul> <li>Home</li> <li>My Research</li> <li>Experiments</li></ul>
• Home• My
Research• Experiment
s
<ul> = Unordered list (bulleted)<ol> = Ordered list (numbered)<li> = List element
Try it out!
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
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 />
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⦿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
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, 7-8PM
⦿Feedback
