Hypertext Markup Language (HTML)
92K - views

Hypertext Markup Language (HTML)

Similar presentations


Download Presentation

Hypertext Markup Language (HTML)




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>

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

Slide9

Document structure

Slide10

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

Slide11

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!

Slide12

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!

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

*from http://www.w3schools.com/css/css_display_visibility.asp

Slide18

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>

Slide19

Other Cool Stuff HTML Can Do

TablesForms – Great for quizzes!

Slide20

Putting Your Pages

on the Web

Slide21

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

Slide22

Slide23

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

Slide24

Slide25