13
<HTML> <head> <title>Hello World</title> </head> <body bgcolor = “#000000”> <font color = “#ffffff ”> <H1>Hello World</H1> </font> </body> </HTML> Slide 1 HTML (Hyper Text Mark-Up Language)

HTML (Hyper Text Mark-Up Language)eecs.csuohio.edu/~sschung/CIS408/How_html_Works_1.pdfAll HTML elements can have attributes Attributes provide additional information about an element

  • Upload
    others

  • View
    7

  • Download
    0

Embed Size (px)

Citation preview

Page 1: HTML (Hyper Text Mark-Up Language)eecs.csuohio.edu/~sschung/CIS408/How_html_Works_1.pdfAll HTML elements can have attributes Attributes provide additional information about an element

<HTML>

<head>

<title>Hello World</title>

</head>

<body bgcolor = “#000000”>

<font color = “#ffffff ”>

<H1>Hello World</H1>

</font>

</body>

</HTML> Slide 1

HTML(Hyper Text Mark-Up Language)

Page 2: HTML (Hyper Text Mark-Up Language)eecs.csuohio.edu/~sschung/CIS408/How_html_Works_1.pdfAll HTML elements can have attributes Attributes provide additional information about an element

Slide 2

Execution of HTML by Web Brower

Page 3: HTML (Hyper Text Mark-Up Language)eecs.csuohio.edu/~sschung/CIS408/How_html_Works_1.pdfAll HTML elements can have attributes Attributes provide additional information about an element

● Element: Tag

� <Element_Name> Predefined Class </Element_Name>

� Can be Nested

Example:

<!DOCTYPE html><html>

<body><h1>My First Heading</h1><p>My first paragraph.</p>

</body></html>

Slide 3

HTML

Page 4: HTML (Hyper Text Mark-Up Language)eecs.csuohio.edu/~sschung/CIS408/How_html_Works_1.pdfAll HTML elements can have attributes Attributes provide additional information about an element

● All HTML elements can have attributes

● Attributes provide additional information about an

element

● Attributes are always specified in the start tag

● Attributes usually come in name/value pairs

like: name="value“

Example:

<a href="https://www.w3schools.com">This is a link</a>

Slide 4

HTML: Attribute

Page 5: HTML (Hyper Text Mark-Up Language)eecs.csuohio.edu/~sschung/CIS408/How_html_Works_1.pdfAll HTML elements can have attributes Attributes provide additional information about an element

Slide 5

Introduction

There are several good reasons for taking CS408: Internet Computing:

● You will learn a variety of interesting concepts.

● It may inspire you to change the way software is developed.

● It will give you the tools to become fabulously wealthy.

...

Page 6: HTML (Hyper Text Mark-Up Language)eecs.csuohio.edu/~sschung/CIS408/How_html_Works_1.pdfAll HTML elements can have attributes Attributes provide additional information about an element

Slide 6

Introduction

There are several good reasons for taking

CIS408: Internet Computing:

You will learn a variety of interesting

concepts.

It may inspire you to change the way

software is developed.

It will give you the tools to become

fabulously wealthy.

Page 7: HTML (Hyper Text Mark-Up Language)eecs.csuohio.edu/~sschung/CIS408/How_html_Works_1.pdfAll HTML elements can have attributes Attributes provide additional information about an element

Slide 7

<h1>Introduction</h1>

<p>

There are several good reasons for taking

<i>CIS408: Internet Computing</i>:

</p>

<ul>

<li>

You will learn a variety of interesting

concepts.

</li>

<li>

It may inspire you to change the way

software is developed.

</li>

<li>

It will give you the tools to become

fabulously wealthy.

</li>

</ul>

Markup

Tags

Page 8: HTML (Hyper Text Mark-Up Language)eecs.csuohio.edu/~sschung/CIS408/How_html_Works_1.pdfAll HTML elements can have attributes Attributes provide additional information about an element

Slide 8

<h1>Introduction</h1>

<p>

There are several good reasons for

taking <i>CIS408: Internet Computing</i>:

</p>

<ul>

<li>

You will learn a variety of

interesting concepts.

</li>

...

Introduction

There are several good reasons for taking CIS408: Internet

Computing:

● You will learn a variety of interesting concepts.

● It may inspire you to change the way software is

developed.

● It will give you the tools to become fabulously wealthy.

...

Page 9: HTML (Hyper Text Mark-Up Language)eecs.csuohio.edu/~sschung/CIS408/How_html_Works_1.pdfAll HTML elements can have attributes Attributes provide additional information about an element

Slide 9

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

lang="en">

<head>

<title>Hello World</title>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

Page 10: HTML (Hyper Text Mark-Up Language)eecs.csuohio.edu/~sschung/CIS408/How_html_Works_1.pdfAll HTML elements can have attributes Attributes provide additional information about an element

Slide 10

The XHTML Codes of the Page Without Tags To Define a Layout

for the Text

Page 11: HTML (Hyper Text Mark-Up Language)eecs.csuohio.edu/~sschung/CIS408/How_html_Works_1.pdfAll HTML elements can have attributes Attributes provide additional information about an element

Slide 11

XHTML Page Display Without Tags To Define a Layout

for the Text

Page 12: HTML (Hyper Text Mark-Up Language)eecs.csuohio.edu/~sschung/CIS408/How_html_Works_1.pdfAll HTML elements can have attributes Attributes provide additional information about an element

Slide 12

The XHTML Codes of the PageWith Tags To Define the Layout

for the Text

Page 13: HTML (Hyper Text Mark-Up Language)eecs.csuohio.edu/~sschung/CIS408/How_html_Works_1.pdfAll HTML elements can have attributes Attributes provide additional information about an element

Slide 13

The XHTML Page Display With Tags To Define the Layout

for the Text