If you know nothing about HTML, this is where you can start !!

HTML Basics HTML, Text, Images, Tables

Sukhpal Singh Gill

PhD Research Scholar

Thapar University, Patiala

How the Web Works?

WWW use classical client / server architecture

HTTP is text-based request-response protocol

Page request

Client running a Web Browser

Server running Web Server Software

(IIS, Apache, etc.)

Server response

What is a Web Page?

Web pages are text files containing HTML

HTML – Hyper Text Markup Language

A notation for describing

document structure (semantic markup)

formatting (presentation markup)

Looks (looked?) like:

A Microsoft Word document

The markup tags provide information about the page content structure

Creating HTML Pages

An HTML file must have an .htm or .html file extension

HTML files can be created with text editors:

NotePad, NotePad ++, PSPad

Or HTML editors (WYSIWYG Editors):

Microsoft FrontPage

Macromedia Dreamweaver

Netscape Composer

Microsoft Word

Visual Studio 4

HTML Basics Text, Images, Tables, Forms

HTML Structure

HTML is comprised of “elements” and “tags”

Begins with <html> and ends with </html>

Elements (tags) are nested one inside another:

Tags have attributes:

HTML describes structure using two main sections: <head> and <body>

HTML Code Formatting

The HTML source code should be formatted to increase readability and facilitate debugging.

Every block element should start on a new line.

Every nested (block) element should be indented.

Browsers ignore multiple whitespaces in the page source, so formatting is harmless.

For performance reasons, formatting can be sacrificed

First HTML Page

<!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html>

test.html

<!DOCTYPE HTML>

<html>

<head>

<title>My First HTML Page</title>

</head>

<body>

</body>

</html>

First HTML Page: Tags

Opening tag

Closing tag

An HTML element consists of an opening tag, a closing tag and the content inside.

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

</html>

First HTML Page: Header

HTML header

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

</html>

First HTML Page: Body

HTML body

Some Simple Tags

Hyperlink Tags

Image Tags

Text formatting tags

<a href="http://www.telerik.com/"

title="Telerik">Link to Telerik Web site</a>

This text is <em>emphasized.</em>

This one is <strong>more emphasized.</strong>

Some Simple Tags – Example

<!DOCTYPE HTML> <html> <head> <title>Simple Tags Demo</title> </head> <body> <a href="http://www.telerik.com/" title= "Telerik site">This is a link.</a> <br /> <img src="logo.gif" alt="logo" /> <br /> <strong>Bold</strong> and <em>italic</em> text. </body> </html>

some-tags.html

Some Simple Tags – Example (2)

<!DOCTYPE HTML> <html> <head> <title>Simple Tags Demo</title> </head> <body> <a href="http://www.telerik.com/" title= "Telerik site">This is a link.</a> <br /> <img src="logo.gif" alt="logo" /> <br /> <strong>Bold</strong> and <em>italic</em> text. </body> </html>

some-tags.html

Tags Attributes

Tags can have attributes

Attributes specify properties and behavior

Example:

Few attributes can apply to every element:

id, style, class, title

The id is unique in the document

Content of title attribute is displayed as hint when the element is hovered with the mouse

Some elements have obligatory attributes

Attribute alt with value "logo"

Headings and Paragraphs

Heading Tags (h1 – h6)

Paragraph Tags

Sections: div and span

<p>This is my first paragraph</p> <p>This is my second paragraph</p>

<h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3>

Headings and Paragraphs – Example

<!DOCTYPE HTML> <html> <head><title>Headings and paragraphs</title></head> <body> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p> <div style="background:skyblue"> This is a div</div> </body> </html>

headings.html

<!DOCTYPE HTML> <html> <head><title>Headings and paragraphs</title></head> <body> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p> <div style="background:skyblue"> This is a div</div> </body> </html>

Headings and Paragraphs – Example (2)

headings.html

Introduction to HTML HTML Document Structure in Depth

Preface

It is important to have the correct vision and attitude towards HTML

HTML is only about structure, not appearance

Browsers tolerate invalid HTML code and parse

errors – you should not.

HTML vs. XHTML

XHTML is more strict than HTML

Tags and attribute names must be in lowercase

All tags must be closed (<br/>, <img/>) while

HTML allows <br> and <img> and implies

missing closing tags (<p>par1 <p>par2)

XHTML allows only one root <html> element

(HTML allows more than one)

<body> Section: Introduction

The <body> section describes the viewable portion of the page

Starts after the <head> </head> section

Begins with <body> and ends with </body>

<html>

<body>

</body>

</html>

Text Formatting

Text formatting tags modify the text between the opening tag and the closing tag

Ex. <b>Hello</b> makes “Hello” bold

<b></b> bold

<i></i> italicized

<u></u> underlined

<sup></sup> Samplesuperscript

<sub></sub> Samplesubscript

<strong></strong> strong

<em></em> emphasized

<pre></pre> Preformatted text

<blockquote></blockquote> Quoted text block

<del></del> Deleted text – strike through

Text Formatting – Example

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

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

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Notice</h1>

<p>This is a <em>sample</em> Web page.</p>

<p><pre>Next paragraph:

preformatted.</pre></p>

<p>Specifically, we’re using XHMTL 1.0 transitional.<br />

Next line.</p>

</body>

</html>

text-formatting.html

Text Formatting – Example (2)

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

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

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Notice</h1>

<p>This is a <em>sample</em> Web page.</p>

<p><pre>Next paragraph:

preformatted.</pre></p>

<p>Specifically, we’re using XHMTL 1.0 transitional.<br />

Next line.</p>

</body>

</html>

text-formatting.html

Hyperlinks: <a> Tag

Link to a document called form.html on the same server in the same directory:

Link to a document called parent.html on the same server in the parent directory:

Link to a document called cat.html on the same server in the subdirectory stuff:

<a href="../parent.html">Parent</a>

<a href="stuff/cat.html">Catalog</a>

Hyperlinks: <a> Tag (2)

Link to an external Web site:

Always use a full URL, including "http://", not

just "www.somesite.com"

Using the target="_blank" attribute opens

the link in a new window

Link to an e-mail address:

Please report bugs here (by e-mail only)</a>

Hyperlinks: <a> Tag (3)

Link to a document called apply-now.html

On the same server, in same directory

Using an image as a link button:

Link to a document called index.html

On the same server, in the subdirectory english of the parent directory:

<a href="apply-now.html"><img

src="apply-now-button.jpg" /></a>

<a href="../english/index.html">Switch to

English version</a>

Links to the Same Document – Example

<h1>Table of Contents</h1>

<p><a href="#section1">Introduction</a><br />

<a href="#section2">Some background</A><br />

<a href="#section2.1">Project History</a><br />

...the rest of the table of contents...

<h2 id="section1">Introduction</h2>

... Section 1 follows here ...

<h2 id="section2">Some background</h2>

<h3 id="section2.1">Project History</h3>

... Section 2.1 follows here ...

links-to-same-document.html

Links to the Same Document – Example (2)

<h1>Table of Contents</h1>

<p><a href="#section1">Introduction</a><br />

<a href="#section2">Some background</A><br />

<a href="#section2.1">Project History</a><br />

...the rest of the table of contents...

<h2 id="section1">Introduction</h2>

<h2 id="section2">Some background</h2>

<h3 id="section2.1">Project History</h3>

... Section 2.1 follows here ...

links-to-same-document.html

Inserting an image with <img> tag:

Image attributes:

Example:

Images: <img> tag

src Location of image file (relative or absolute)

alt Substitute text for display (e.g. in text mode)

height Number of pixels of the height

width Number of pixels of the width

border Size of border, 0 for no border

Miscellaneous Tags

<hr />: Draws a horizontal rule (line):

<center></center>: Deprecated!

<font></font>: Deprecated!

<center>Hello World!</center>

a. Apple b. Orange c. Grapefruit

Ordered Lists: <ol> Tag

Create an Ordered List using <ol></ol>:

Attribute values for type are 1, A, a, I, or i

1. Apple 2. Orange 3. Grapefruit

A. Apple B. Orange C. Grapefruit

I. Apple II. Orange III. Grapefruit

i. Apple ii. Orange iii. Grapefruit

<li>Apple</li>

<li>Orange</li>

<li>Grapefruit</li>

Unordered Lists: <ul> Tag

Create an Unordered List using <ul></ul>:

Attribute values for type are:

disc, circle or square

• Apple

• Orange

• Pear

o Apple

o Orange

o Pear

Orange

<li>Apple</li>

<li>Orange</li>

<li>Grapefruit</li>

Definition lists: <dl> tag

Create definition lists using <dl>

Pairs of text and associated definition; text is in

<dt> tag, definition in <dd> tag

Renders without bullets

Definition is indented 35

<dd>A markup language …</dd>

<dd>Language used to …</dd>

Lists – Example

<ol type="1"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ol> <ul type="disc"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ul> <dl> <dt>HTML</dt> <dd>A markup lang…</dd> </dl>

lists.html

HTML Special Characters

£ £ British Pound

€ € Euro

" " Quotation Mark

¥ ¥ Japanese Yen

— — Em Dash

Non-breaking Space

& & Ampersand

> > Greater Than

< < Less Than

™ ™ Trademark Sign

® ® Registered Trademark Sign

Symbol HTML Entity Symbol Name

Special Characters – Example

special-chars.html

Special Chars – Example (2)

special-chars.html

HTML Tables

Tables represent tabular data

A table consists of one or several rows

Each row has one or more columns

Tables comprised of several core tags: <table></table>: begin / end the table

<tr></tr>: create a table row <td></td>: create tabular data (cell)

Tables should not be used for layout. Use CSS

floats and positioning styles instead

HTML Tables (2)

Start and end of a table

Start and end of a row

Start and end of a cell in a row

Simple HTML Tables – Example

<table cellspacing="0" cellpadding="5"> <tr> <td><img src="ppt.gif"></td> <td><a href="lecture1.ppt">Lecture 1</a></td> </tr> <tr> <td><img src="ppt.gif"></td> <td><a href="lecture2.ppt">Lecture 2</a></td> </tr> <tr> <td><img src="zip.gif"></td> <td><a href="lecture2-demos.zip"> Lecture 2 - Demos</a></td> </tr> </table>

Simple HTML Tables – Example (2)

Complete HTML Tables

Table rows split into three semantic sections: header, body and footer

<thead> denotes table header and contains

<th> elements, instead of <td> elements

<tbody> denotes collection of table rows that

contain the very data

<tfoot> denotes table footer but comes

BEFORE the <tbody> tag

<colgroup> and <col> define columns (most

often used to set column widths) 45

Complete HTML Table: Example

<table>

</colgroup>

<thead>

<tr><th>Column 1</th><th>Column 2</th></tr>

</thead>

<tfoot>

<tr><td>Footer 1</td><td>Footer 2</td></tr>

</tfoot>

<tbody>

</tbody>

</table>

header

footer

Last comes the body (data)

columns

<table>

</colgroup>

<thead>

<tr><th>Column 1</th><th>Column 2</th></tr>

</thead>

<tfoot>

<tr><td>Footer 1</td><td>Footer 2</td></tr>

</tfoot>

<tbody>

</tbody>

</table>

Complete HTML Table: Example (2)

table-full.html

Although the footer is before the data in the

code, it is displayed last

By default, header text is bold and centered.

Nested Tables

Table data “cells” (<td>) can contain nested tables (tables within tables):

<table> <tr> <td>Contact:</td> <td> <table> <tr> <td>First Name</td> <td>Last Name</td> </tr> </table> </td> </tr> </table>

nested-tables.html

Column and Row Span – Example (2)

table-colspan-rowspan.html

Cell[2,3] Cell[1,3]

Cell[3,2]

Cell[2,2]

Cell[1,2]

Cell[2,1] Cell[1,1]

Background Color

It is very common to see web pages with their background color set to white or some other colors.

To set your document’s background color, you need to edit the <BODY> element by adding the BGCOLOR attribute. The following example will display a document with a white background color:

TEXT Color

The TEXT attribute is used to control the color of all the normal text in the document. The default color for text is black. The TEXT attribute would be added as follows:

In this example the document’s page

color is white and the text would be red.

Using Image Background

The BODY element also gives you ability of setting an image as the document’s background.

An example of a background image’s HTML code is as follows:

Previewing Your Work

Once you have created your basic starting document and set your document properties it is a good idea to save your file.

To save a file, in NotePad, follow these steps:

1. Locate and click on the menu called “File”.

2. Select the option under File Menu labeled “Save As”.

3. In the “File Name” text box, type in the entire name of your file (including the extension name .html).

Headings, <Hx> </Hx>

Inside the BODY element, heading elements H1 through H6 are generally used for major divisions of the document. Headings are permitted to appear in any order, but you will obtain the best results when your documents are displayed in a browser if you follow these guidelines:

1. H1: should be used as the highest level of heading, H2 as the next highest, and so forth.

2. You should not skip heading levels: e.g., an H3 should not appear after an H1, unless there is an H2 between them.

Headings, <Hx> </Hx>

<HTML>

<HEAD>

<TITLE> Example Page</TITLE>

</HEAD>

<BODY>

<H1> Heading 1 </H1>

</BODY>

</HTML>

Heading 1

Heading 2

Heading 3 Heading 4

Heading 5

Heading 6

Paragraphs, <P> </P>

Paragraphs allow you to add text to a document in such a way that it will automatically adjust the end of line to suite the window size of the browser in which it is being displayed. Each line of text will stretch the entire length of the window.

Paragraphs, <P> </P>

</HEAD>

<BODY></H1> Heading 1 </H1>

<P> Paragraph 1, ….</P>

<H6> Heading 6</H6>

</BODY></HTML>

Heading 1 Paragraph 1,….

Heading 6

Paragraph 6,….

Break, <BR>

Line breaks allow you to decide where the text will

break on a line or continue to the end of the window.

A <BR> is an empty Element, meaning that it may

contain attributes but it does not contain content.

The <BR> element does not have a closing tag.

Break, <BR>

<HTML>

<HEAD>

</HEAD>

<BODY>

<P>Paragraph 1, <BR>

Line 2 <BR> Line 3 <BR>….

</BODY>

</HTML>

Line 2

Line 3

Bold, Italic and other Character Formatting

Elements

<P> <FONT SIZE=“+1”> One Size Larger </FONT> - Normal –

<FONT SIZE=“-1”> One Size Smaller </FONT> <BR>

<B> Bold</B> - <I> italics</I> - <U> Underlined </U> -

<FONT COLOR=“#FF0000”> Colored </FONT> <BR>

<EM> Emphasized</EM> - <STRONG> Strong </STRONG> - <TT> Tele Type </TT> <BR>

One Size Larger - Normal – One Size Smaller Bold - italics - Underlined - Colored Emphasized - Strong - Tele Type

Alignment

Some elements have attributes for alignment (ALIGN) e.g. Headings, Paragraphs and Horizontal Rules.

The Three alignment values are : LEFT, RIGHT, CENTER.

<CENTER></CENTER> Will center elements.

In this chapter you will learn how to create a variety of lists.

Objectives

Upon completing this section, you should be able to

1. Create an unordered list.

2. Create an ordered list.

3. Create a defined list.

4. Nest Lists.

List Elements

HTML supplies several list elements. Most list elements are

composed of one or more <LI> (List Item) elements.

UL : Unordered List. Items in this list start with a list mark

such as a bullet. Browsers will usually change the list mark

in nested lists.

List item …

List Elements

You have the choice of three bullet types: disc(default), circle, square.

These are controlled in Netscape Navigator by the “TYPE” attribute for the <UL> element.

List item …

List Elements

OL: Ordered List. Items in this list are numbered automatically by the browser.

1. List item …

2. List item …

3. List item

You have the choice of setting the TYPE Attribute to one of five numbering styles.

List Elements

You can specify a starting number for an ordered list.

List Elements i. List item …

ii. List item …

Text ….

iii. List item …

List Elements

DL: Definition List. This kind of list is different from the others. Each item in a DL consists of one or more Definition Terms (DT elements), followed by one or more Definition Description (DD elements).

<DD> Hyper Text Markup Language </DD>

<DD> A human’s best friend!</DD>

Hyper Text Markup Language

A human’s best friend!

Nesting Lists

You can nest lists by inserting a UL, OL, etc., inside a list item (LI).

EXample

<LI> List item …

<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>

<LI>Wear a life jacket at all times </LI>

<LI>Don't stand up or move around. If canoe tips,

<LI>Hang on to the canoe </LI>

<LI>Use the canoe for support and </LI>

<LI>Swim to shore

</UL> </LI>

<LI>Don't overexert yourself </LI>

<LI>Use a bow light at night </LI>

What will be the output?

<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1> <OL TYPE="a" START="2"> <LI>Be able to swim </LI> <LI>Wear a life jacket at all times </LI> <LI>Don't stand up or move around. If canoe tips, <UL> <LI>Hang on to the canoe </LI> <LI>Use the canoe for support <OL type="I" start="4"> <LI> Be careful </LI> <LI> Do not look around</LI> </LI> </OL> <LI>Swim to shore </UL> </LI> <LI>Don't overexert yourself </LI> <LI>Use a bow light at night </LI> </OL>

Images In this chapter you will learn about images and

how to place images in your pages.

Objectives

1. Add images to your pages.

Images <IMG>This element defines a graphic image on the

Image File (SRC:source): This value will be a URL (location of the image) E.g. http://www.domain.com/dir/file.ext or /dir/file.txt.

Alternate Text (ALT): This is a text field that describes an image or acts as a label. It is displayed when they position the cursor over a graphic image.

Alignment (ALIGN): This allows you to align the image on your page.

Some Examples on images

1) <IMG SRC=“jordan.gif“ border=4>

2) <IMG SRC=" jordan.gif" width="60" height="60">

3) <IMG SRC=“jordan.gif" ALT="This is a text that goes with the image">

4) <IMG SRC=" jordan.gif “ Hspace="30" Vspace="10" border=20>

5) < IMG SRC =" jordan.gif“ align="left">

blast blast blast blast blast

Anchors, URLs and Image Maps In this chapter you will learn about Uniform Resource

Locator, and how to add them as Anchor or Links inside

your web pages.

Objectives

1. Insert links into documents.

2. Define Link Types.

3. Define URL.

4. List some commonly used URLs.

5. Plan an Image Map.

HOW TO MAKE A LINK

1) The tags used to produce links are the <A>

and </A>. The <A> tells where the link should start and

the </A> indicates where the link ends. Everything between

these two will work as a link.

2) The example below shows how to make the word

Here work as a link to yahoo.

Click <A HREF="http://www.yahoo.com">here</A> to

go to yahoo.

LINK - standard link - to a page the visitor hasn't been to yet. (standard color is blue - #0000FF). VLINK - visited link - to a page the visitor has been to before. (standard color is purple - #800080). ALINK - active link - the color of the link when the mouse is on it. (standard color is red - #FF0000).

If the programmer what to change the color

Click <a href="http://www.yahoo.com"><font color="FF00CC">here</font></a> to go to yahoo.

If you know nothing about HTML, this is where you can start !!

Education

Transcript of If you know nothing about HTML, this is where you can start !!

We Are Nothing and So Can You

1 HTML Tables. 22 Objectives You will be able to Create tables in HTML.

Nothing Compares To You!

When You Say Nothing at All

You’re the Researcher You Decide 2008.html.

Nothing Without You

Data: You had nothing! Geordi: He bluffed you, Data. Data: It …poker.cs.ualberta.ca/publications/Hawkin_PhD.pdf · 2018. 4. 14. · Data: You had nothing! Geordi: He bluffed you,

HTML Advanced: HTML 5. Welcome This slideshow presentation is designed to introduce you to HTML 5. It is the third of three HTML workshops available at.

xtmhd.com mysweeetworld.com You are……nothing heygirl.com.tr.

Dynamic HTML Editor - Hexagora HTML Editor.pdf · Dynamic HTML Editor is a Dynamic Multi-Browser Compatibile HTML/XHTML WYSIWYG Editor (What You See Is What You Get). This means that

Anton Kastner - Pirzer Bestattungen · 2019-05-22 · There´s nothing you ... Nothing you can say, but you can learn how to play the game It´s easy There´s nothing you can make

YOU AIN’T SEEN NOTHING YET

Do Nothing Till You Hear From Me.pdf

Seize the moment - If you read nothing

Nothing Grows Until YOU Do

AZIATIX Nothing Compares To You - pisnicky-akordy.cz

Immersive Web for Mixed Reality and HoloLens · A-Frame will handle 3D boilerplate, VR setup, and default controls. Nothing to install, no build steps. Declarative HTML: HTML is easy

Nothing will Work unless you do it: Contextualizing … › GJMBR_Volume19 › 5-Nothing-will...Nothing will Work unless you do it: Contextualizing Women Entrepreneurship Dr. Tanusree

DAY 1 - BASICS · HTML Basics Hyper-Text Markup Language (HTML) is not a programming language. Not executable – nothing to install Merely "rendered" by a browser Markup languages

Without Christ, You Can Do Nothing