HTML 1 CS 337 - Web Programming University of Arizona - Spring 2014 - - PowerPoint PPT Presentation

▶
html 1
SMART_READER_LITE
LIVE PREVIEW

HTML 1 CS 337 - Web Programming University of Arizona - Spring 2014 - - PowerPoint PPT Presentation

Mar 20, 2024 242 likes •657 views

HTML 1 CS 337 - Web Programming University of Arizona - Spring 2014 Day 1 Review There are four main technological elements used in a majority of websites Design Interaction Logic Database (HTML & CSS) (JavaScript) (PHP/ (MySQL/

slide-1
SLIDE 1

HTML 1

CS 337 - Web Programming University of Arizona - Spring 2014

slide-2
SLIDE 2

Day 1 Review

There are four main technological elements used in a majority of websites

CS 337 - Web Programming University of Arizona - Spring 2014

Design (HTML & CSS) Interaction (JavaScript) Logic (PHP/ ASP.NET/ Java) Database (MySQL/ SQL Server/ Oracle)

slide-3
SLIDE 3

Learning Objectives

  • At the end of this lesson you should be

able to:

  • Explain how to use comments, the concept of

elements and tags, and indention

  • Name, explain the purpose, and provide the

correct order of the required declarations and elements of an HTML document

  • Explain the difference between block elements

and inline elements and two generic tags that represent them.

CS 337 - Web Programming University of Arizona - Spring 2014

slide-4
SLIDE 4

Naming a file:

  • End with .html
  • No spaces
  • Only alpha-numeric

characters for best results

  • Can use dashes –
  • example.html
  • example-page.html

CS 337 - Web Programming University of Arizona - Spring 2014

HTML Pages

slide-5
SLIDE 5

Comments are started with a <!-- and end with --> Example: <!-- This is a comment -->

CS 337 - Web Programming University of Arizona - Spring 2014

Comments

Browser View

slide-6
SLIDE 6

HTML Tags

  • HTML is a markup language
  • This means that it is a language designed

to be machine-readable

  • All design elements of an HTML page use

tags with the ability to define attributes and the text in the element

  • A tag is represented by < and >
  • Tags should be lowercase

CS 337 - Web Programming University of Arizona - Spring 2014

slide-7
SLIDE 7

HTML Tags

  • For example, if I wanted to tell the

machine reading my page that I want it to define paragraph, I would put the word paragraph in a tag

  • Example:

<paragraph>

CS 337 - Web Programming University of Arizona - Spring 2014

slide-8
SLIDE 8

HTML Tags

  • All tags should be closed so the machine

knows where the end of the tag is

  • Tags are closed similarly to how they are
  • pened except there is a / before the

name of the tag

  • Together, these make an HTML element
  • Example:

<paragraph> </paragraph>

CS 337 - Web Programming University of Arizona - Spring 2014

slide-9
SLIDE 9
  • The text you put

between the opening and closing tags (inside an element) is displayed to the user

  • Example:

<paragraph>Hello World</paragraph>

CS 337 - Web Programming University of Arizona - Spring 2014

HTML Tags

Browser View

slide-10
SLIDE 10

HTML Tags

  • You can also define attributes about an

element by putting the attribute in the

  • pening tag and defining it.
  • Example:

<paragraph name="myParagraph"> Hello World </paragraph>

CS 337 - Web Programming University of Arizona - Spring 2014

slide-11
SLIDE 11

HTML Tags

  • As programmers try to use smaller names

for standard tags so it is faster to type

  • In the case of a paragraph, p is used
  • Example:

<p>Hello World</p>

CS 337 - Web Programming University of Arizona - Spring 2014

slide-12
SLIDE 12
  • Elements can be

nested

  • When nested, they

should be indented by human readability <p>Hello World <p> Goodbye World </p> </p>

CS 337 - Web Programming University of Arizona - Spring 2014

Indentation

Browser View

slide-13
SLIDE 13

Learning Objectives

  • At the end of this lesson you should be

able to:

  • Explain how to use comments, the concept of

elements and tags, and indention

  • Name, explain the purpose, and provide the

correct order of the required declarations and elements of an HTML document

  • Explain the difference between block elements

and inline elements and two generic tags that represent them.

CS 337 - Web Programming University of Arizona - Spring 2014

slide-14
SLIDE 14

Learning Objectives

  • At the end of this lesson you should be

able to:

  • Explain how to use comments, the concept of

elements and tags, and indention

  • Name, explain the purpose, and provide the

correct order of the required declarations and elements of an HTML document

  • Explain the difference between block elements

and inline elements and two generic tags that represent them.

CS 337 - Web Programming University of Arizona - Spring 2014

slide-15
SLIDE 15

Required Elements

  • There are two required elements in an

HTML document

  • <!DOCTYPE html>
  • <title>

CS 337 - Web Programming University of Arizona - Spring 2014

slide-16
SLIDE 16

Standard Elements

  • There are three standard elements in an

HTML document

  • <html>
  • <head>
  • <body>

CS 337 - Web Programming University of Arizona - Spring 2014

slide-17
SLIDE 17

<!DOCTYPE html>

  • A very special, required element
  • Defines the document as an html

document

  • No closing tag
  • Must be on the first line of the document

CS 337 - Web Programming University of Arizona - Spring 2014

slide-18
SLIDE 18
  • Required
  • Specifies the title of the

document <!DOCTYPE html> <title>Example Page</title>

CS 337 - Web Programming University of Arizona - Spring 2014

<title>

Browser View

slide-19
SLIDE 19
  • Specifies the portion of

the document that contains html (which is all of it)

  • It represents the root of

the document so that there is an element that contains everything

CS 337 - Web Programming University of Arizona - Spring 2014

<html>

<!DOCTYPE html> <html> <title>Example Page</title> </html>

slide-20
SLIDE 20
  • Contains elements

about the HTML document itself

  • Not for elements that

should be displayed to the user

  • There should only be
  • ne head element

CS 337 - Web Programming University of Arizona - Spring 2014

<head>

<!DOCTYPE html> <html> <head> <title> Example Page </title> </head> </html>

slide-21
SLIDE 21

<body>

  • Contains all of the elements designed to

be displayed to the user

  • There should only be one body element

CS 337 - Web Programming University of Arizona - Spring 2014

slide-22
SLIDE 22

<body>

<!DOCTYPE html> <html> <head> <title>Example Page</title> </head> <body> <p>Hello World!</p> </body> </html>

CS 337 - Web Programming University of Arizona - Spring 2014

slide-23
SLIDE 23

Recommended Elements

  • There are two recommended elements in

an HTML document

  • <meta>
  • <meta>
  • Actually it is the same element used

twice with different attributes

CS 337 - Web Programming University of Arizona - Spring 2014

slide-24
SLIDE 24

Recommended Elements

  • <meta charset="UTF-8" />
  • Defines the character set of you HTML file
  • <meta name="description" content="This is

an example page">

  • Defines the description of the page to be used by search

engines

  • There are other meta attributes that can be used,

but aren’t as common

CS 337 - Web Programming University of Arizona - Spring 2014

slide-25
SLIDE 25

Meta Description

CS 337 - Web Programming University of Arizona - Spring 2014

slide-26
SLIDE 26

Header

... <head> <title>Example Page</title> <meta charset="UTF-8" /> <meta name="description" content="This is an example page"> </head> ...

CS 337 - Web Programming University of Arizona - Spring 2014

slide-27
SLIDE 27

Body Structure

  • While not required, there are some

elements commonly used to structure the body of a website

CS 337 - Web Programming University of Arizona - Spring 2014

<header> <nav> <section> <article> <aside> <footer>

slide-28
SLIDE 28

Body Structure

CS 337 - Web Programming University of Arizona - Spring 2014

slide-29
SLIDE 29

CS 337 - Web Programming University of Arizona - Spring 2014

Partner Activity

slide-30
SLIDE 30

Learning Objectives

  • At the end of this lesson you should be

able to:

  • Explain how to use comments, the concept of

elements and tags, and indention

  • Name, explain the purpose, and provide the

correct order of the required declarations and elements of an HTML document

  • Explain the difference between block elements

and inline elements and two generic tags that represent them.

CS 337 - Web Programming University of Arizona - Spring 2014

slide-31
SLIDE 31

Learning Objectives

  • At the end of this lesson you should be

able to:

  • Explain how to use comments, the concept of

elements and tags, and indention

  • Name, explain the purpose, and provide the

correct order of the required declarations and elements of an HTML document

  • Explain the difference between block elements

and inline elements and two generic tags that represent them.

CS 337 - Web Programming University of Arizona - Spring 2014

slide-32
SLIDE 32

Block vs. Inline

  • There are two types of display elements
  • Block
  • Inline

CS 337 - Web Programming University of Arizona - Spring 2014

slide-33
SLIDE 33

Block

  • If no width is set, will expand naturally to

fill its parent container

  • Can have margins and/or padding
  • If no height is set, will expand naturally to

fit its child elements

  • Will be placed below previous elements
  • Introduces a carriage return after

CS 337 - Web Programming University of Arizona - Spring 2014

slide-34
SLIDE 34

Block

CS 337 - Web Programming University of Arizona - Spring 2014

slide-35
SLIDE 35

Inline

  • Flows along with text content
  • Will not drop to the next line
  • Will ignore top and bottom margin

settings, but will apply left and right margins, and any padding

  • Will ignore the width and height

properties

CS 337 - Web Programming University of Arizona - Spring 2014

slide-36
SLIDE 36

Inline

CS 337 - Web Programming University of Arizona - Spring 2014

slide-37
SLIDE 37

Block vs. Inline

  • Each have a generic element
  • Block
  • <div>
  • Inline
  • <span>

CS 337 - Web Programming University of Arizona - Spring 2014

slide-38
SLIDE 38

Partner: div or span?

CS 337 - Web Programming University of Arizona - Spring 2014

slide-39
SLIDE 39

Learning Objectives

  • At the end of this lesson you should be

able to:

  • Explain how to use comments, the concept of

elements and tags, and indention

  • Name, explain the purpose, and provide the

correct order of the required declarations and elements of an HTML document

  • Explain the difference between block elements

and inline elements and two generic tags that represent them.

CS 337 - Web Programming University of Arizona - Spring 2014

slide-40
SLIDE 40

Learning Objectives

  • At the end of this lesson you should be

able to:

  • Explain how to use comments, the concept of

elements and tags, and indention

  • Name, explain the purpose, and provide the

correct order of the required declarations and elements of an HTML document

  • Explain the difference between block elements

and inline elements and two generic tags that represent them.

CS 337 - Web Programming University of Arizona - Spring 2014