8/13/2019 16952_HTML

1/28

Intro to HTML

8/13/2019 16952_HTML

2/28

Overview

HTML Defined Syntax

Structure

Content

Posting Online

8/13/2019 16952_HTML

3/28

What is HTML?

Stands for Hyper Text MarkupLanguage

The glue that holds the content on a webpage together

Every page on the web is created inHTML, or some variant of it

8/13/2019 16952_HTML

4/28

HTML Files

Merely text files that contain hyperlinksandmarkup Hyperlinks: ?

Markup: HTML instructions that dictate how the web page isdisplayed

Read by browsers

But each web browser interprets HTML in its own

way With basic HTML, variances arent significant

But pages with advanced elements like multimedia andscripting can get hairy

8/13/2019 16952_HTML

5/28

XHTML

The new and improved version of HTML

Based on XML Extensible Markup Language

Works well with software and the Internet Irregularities in HTML cause problems for

software, so XHTML bridges the gap betweensoftware and web pages

Most HTML and XHTML markup is identical Eventually, XHTML will replace HTML, but HTML

is still going strong

8/13/2019 16952_HTML

6/28

HTML Syntax

3 aspects to HTML markup:

1. Elements

- Identify different parts of an HTML page by using tags

2.Attributes

- Information about the instance of theelement

3. Entities-Symbols like copyright () and accentedletters ()

8/13/2019 16952_HTML

7/28

Elements

The building blocks of HTML

Use elements to describe every piece of texton web pages

Made up of tags and content between tags

e.g.

8/13/2019 16952_HTML

8/28

Tags

Mark the beginning and sometimes the end of anelement (tag pair)

Elements that describe a pages structure always

use tag pairs

Welcome to the Kin 260 page!

tells the browser, The paragraph beginshere.

tells the browser, The paragraph endshere.

8/13/2019 16952_HTML

9/28

Tags, cont.

Elements that insert something into apage use single tags Dont enclose content

The element references an image When the browser displays the page, it

replaces with the file football.jpg

8/13/2019 16952_HTML

10/28

Attributes

Allow variety in how an element isdisplayed or functions

Syntax is:

Example

8/13/2019 16952_HTML

11/28

Entities

Special characters that can be displayed on webpages

Begin with an ampersand (&) and end with a

semicolon (;) e.g. To display in the browser, need to use

Montral

List of HTML entities:

http://www.w3schools.com/tags/ref_entities.asp

http://www.w3schools.com/tags/ref_entities.asphttp://www.w3schools.com/tags/ref_entities.asphttp://www.w3schools.com/tags/ref_entities.asphttp://www.w3schools.com/tags/ref_entities.asp

8/13/2019 16952_HTML

12/28

Comments

Good programming practice to usecomments in code to explain codefunctionality

Comments are not displayed in the finalweb page

Begin comment with the string

8/13/2019 16952_HTML

13/28

Structure of HTML Document

1. HTML version declaration

Contains info about the pages HTML version

2. Header section

Contains info about web page

3. Body section

Contains content of web page

8/13/2019 16952_HTML

14/28

Example of HTML Structure

My first HTML document

Hello world!

8/13/2019 16952_HTML

15/28

HTML Version Declaration

At the top of every html document, musthave this declaration:

The declaration creates a valid HTML page

The declaration also tells the browser whatversion of HTML to support

8/13/2019 16952_HTML

16/28

The Head Element

Header that provides basic information about thedocument

Always enclosed inside

Contains title and metadata Data that describes the page

List of keywords

Kin 260 Home Page

8/13/2019 16952_HTML

17/28

The Body Element

Holds the content of the web pageAlways enclosed inside Always comes after the element

Kin 260 Home PageWelcome to Kin 260!

8/13/2019 16952_HTML

18/28

Ex 11stHTML page

Download and save the HTML starter code

Make the following changes:

HTML

Hello World

View the results in the browser

8/13/2019 16952_HTML

19/28

Saving your HTML file

File > Save As Save as Type:All Files

Encoding:ANSI

File name:

Example.html

8/13/2019 16952_HTML

20/28

Viewing your HTML page

Find the file on yourhard disk

Open the file usingyour web browser

If make a change tothe html file, savein text editor, thenrefresh the page inthe browser

8/13/2019 16952_HTML

21/28

Adding content to HTML pages

Inside the , use text blockstofurther create structure

Includes:

Paragraphs

Headings

Lists

Tables

8/13/2019 16952_HTML

22/28

Summary of Text BlocksTag Description Example

Paragraph

Most common blockelement used on pages

Kin 260 is a class forundergraduate Kinmajors.

Headings and

subheadingsh6 is the smallestheading

Welcome to the Kin

260 Home Page!

Line break

Like hitting the Enterkey

Today in Kin 260

HTML!

Solid straight line Kin 260 Home

Announcements

8/13/2019 16952_HTML

23/28

Ex 2Text Blocks

Create a web page that closely mirrors thefollowing output:

Hint: Use the starter code

Header OneHeader Two

HTML isnt so bad

after all.

8/13/2019 16952_HTML

24/28

Lists

2 main types: Bulletedand numbered Use within Bulleted example:

First list itemSecond list item

stands for Unordered List Encloses the list stands for List Item

Use for each list item

8/13/2019 16952_HTML

25/28

Lists, cont.

Numbered Example

First list itemSecond list item

stands for Ordered List Like , encloses the list

Use for each list item

8/13/2019 16952_HTML

26/28

Ex 3 - Lists

Create a web page that closely mirrors thefollowing output:

To Do Grocery Shopping

Workout

Grocery Shopping

1. Eggs

2. Milk

8/13/2019 16952_HTML

27/28

Posting Your Pages Online

1. Need a web hosting provider to hold yourweb pages

Last time, we used Google Sites

Editor and Web Host

Web host might be the university webserver, your Internet Service Provider or aspecialized web hosting service

Usually, you pay your web host a monthlyfee to act as your web server

8/13/2019 16952_HTML

28/28

Posting Your Pages Online(cont.)

2. Use special software, called an FTPclient, to upload files to the web server

FTP client will make connection to webserver, and you copy files from your harddrive to the server