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

giovanna-bartolotta | 2016-05-08 | General

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

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

Views : 88

Direct Link:
Link:https://www.docslides.com/giovanna-bartolotta/hypertext-markup-language-html
Embed code:

Tags : hypertext-markup-language-html paragraph html css tags html paragraph tags css web link page href http www document body linking website structure include file com

Download this presentation

DownloadNote - 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)

Show

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

yper

ext

arkup

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

(

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.

href

=“http://www.link.com”>

This is a link

</a>

img

src

=“kittens.png” />

An attribute consists of a name and a value.

Tag:

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

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

. Oh wait, I want a

href

=“http://www.link.com”>

link here

</a>

! paragraph

paragraph

</p

If so, close the tags in the reverse of the order you opened them

<h2><

><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:

Google

</a>

Linking between pages:

Instructors

</a>

Slide19

Other Cool Stuff HTML Can Do