Prepare for your exams
Get points
Guidelines and tips
Sell on Docsity
Docsity AI

Prepare for your exams

Study with the several resources on Docsity

Earn points to download

Earn points by helping other students or get them with a premium plan

Guidelines and tips

Sell on Docsity

Docsity AI

Prepare for your exams

Study with the several resources on Docsity

Find documents

Prepare for your exams with the study notes shared by other students like you on Docsity

Search for your university

Find the specific documents for your university's exams

Docsity AINEW

Summarize your documents, ask them questions, convert them into quizzes and concept maps

Explore questions

Clear up your doubts by reading the answers to questions asked by your fellow students

Earn points to download

Earn points by helping other students or get them with a premium plan

Share documents

20 Points

For each uploaded document

Answer questions

5 Points

For each given answer (max 1 per day)

All the ways to get free points

Get points immediately

Choose a premium plan with all the points you need

Study Opportunities

Choose your next study program

Get in touch with the best universities in the world. Search through thousands of universities and official partners

Community

Ask the community

Ask the community for help and clear up your study doubts

Free resources

Our save-the-student-ebooks!

Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors

Basic HTML-Web Programming-Lecture Slides, Slides of Web Programming and Technologies

Ankit Institute of Technology and Science Web Programming and Technologies

This lecture was delivered by Prof. Arun Ullal at Ankit Institute of Technology and Science for Web Programming course. It includes: Basic, HTML, Hypertext, Tags, Elements, Formatting, Hyperlinks, Cascading, Sheet, Styles

Typology: Slides

2011/2012

Uploaded on 07/18/2012

palvani 🇮🇳

4.5

(2)

83 documents

1 / 36

This page cannot be seen from the preview

Don't miss anything!

COMP519: Web Programming

Autumn 2011

Basic HTML

 hypertext

 tags & elements

 text formatting

 lists, hyperlinks, images

 tables, frames

 cascading style sheets

• inline, document, external

docsity.com

Discover Slides of Web Programming and Technologies Ankit Institute of Technology and Science

Partial preview of the text

Download Basic HTML-Web Programming-Lecture Slides and more Slides Web Programming and Technologies in PDF only on Docsity!

COMP519: Web Programming

Autumn 2011

Basic HTML

 hypertext

 tags & elements

 text formatting

 lists, hyperlinks, images

 tables, frames

 cascading style sheets

inline, document, external

Hypertext & HTML

• HyperText Markup Language (HTML) is the language for specifying the static

content of Web pages (based on SGML, the Standard Generalized Markup

Language)

 hypertext refers to the fact that Web pages are more than just text

can contain multimedia, provide links for jumping within the same document & to other

documents

 markup refers to the fact that it works by augmenting text with special symbols (tags) that

identify the document structure and content type

My intention is that you design your webpages to the XHTML 1.

Strict standard (or better).

If you want, you can also use the HTML 5 specification (which, for

the material I teach in this module, is largely the same, but adds

additional features for some multimedia support).

I will be enforcing this standard in your assessments (as

much as possible).

More will be said when I discuss Document Type Declarations

(soon).

In this course…

Web Development Tools

• many high-level tools exist for creating Web pages

e.g., Microsoft FrontPage, Netscape Composer, Adobe PageMill,

Macromedia DreamWeaver, HotDog, …

also, many applications have "save to HTML" options (e.g., Word)

for most users who want to develop basic, static Web pages, these are fine (but many of these

programs produce very poorly structured HTML code)

• assembly language vs. high-level language analogy

 may want low-level control

 may care about size/readability of pages

 may want to "steal" page components and integrate into existing pages

 may want dynamic features such as scripts or applets

 remote editing of web pages may only be possible using a basic text editor

 sticking to (internationally and industrially) agreed upon standards will help ensure

your web documents are rendered as you intend them to look and operate as you

desire

• so, why are we learning low-level HTML using a basic text editor?

Structural Elements

• an HTML document has two main structural elements

 HEAD contains setup information for the browser & the Web page

e.g., the title for the browser window, style definitions, JavaScript code, …

 BODY contains the actual content to be displayed in the Web page

My first HTML document

Hello world!

HTML documents begin and end with

and tags

Comments appear between

HEAD section enclosed between

and tags

BODY section enclosed between

and

* Find more info on HTML docs!

view page

 The element is where you include a element (that appears in

the title bar of the browser).

You can also include lots of other type of information in the <head> element.

o Cascading Style sheet information, or a link to an external style sheet (or several)

o “Meta” data, such as who authored the page, the type of content, and clues that

search engines may (or may not) use to help categorize your page

o JavaScript code

The <body> element contains the main bulk of the material to be displayed on

the webpage.

o Paragraphs

o Tables and lists

o Images

o JavaScript code

o PHP code can be included here too (if passed through a PHP parser)

o Other embedded objects

<head> and <body> elements

Separating Blocks of Text

can specify headings for

paragraphs or blocks of text

 … tags produce a large,

bold heading

 … tags produce a slightly

smaller heading

 … tags produce a tiny

heading

can insert a horizontal rule to divide

sections

 draws line across window

Blocks of Text

Major heading 1

Here is some text.

Subheading

Here is some subtext.

Major heading 2

Here is some more text.

view page

The Basic Web page – A Worked Example

Bill Smiggins Inc.

About our Company...

This Web site provides clients, customers,

interested parties and our staff with all of

the information that they could want on

our products, services, success and failures.

Products

We are probably the largest

supplier of custom widgets, thingummybobs, and bits

and pieces in North America.

view page

Lists

there are 3 different types

of list elements

 … specifies an

ordered list (using numbers

or letters to label each list

item)

identifies each list item

can set type of ordering, start

index

 … specifies

unordered list (using a

bullet for each)

identifies each list item

 … specifies a

definition list identifies

each term

identifies its definition

* We will learn more about the

“style” attributes soon enough.

(Sort of) Simple Lists

... first list item... ... second list item... ...

Dweeb young excitable person who may mature into a Nerd Hacker a clever programmer Nerd technically bright but socially inept person

Makes first item number 30. Next item continues to number

view page

Hyperlinks

perhaps the most important

HTML element is the hyperlink,

or ANCHOR

 …

where URL is the Web address of the

page to be displayed when the user

clicks on the link

if the page is accessed over the Web,

must start with http://

if not there, the browser will assume it

is the name of a local file

 …

causes the page to be loaded in a new

Window

* Find more info on attribute TARGET

Hyperlinks

The University of Liverpool

Open page07 in a new window

view page

Hyperlinks (cont.)

Internal Links in a Page

[ HTML | HTTP | IP | TCP ]

Computer acronyms:

HTML HyperText Markup Language HTTP HyperText Transfer Protocol… IP Internet Protocol… TCP Transfer Control Protocol…

Basic HTML-Web Programming-Lecture Slides, Slides of Web Programming and Technologies

Related documents

Partial preview of the text

Download Basic HTML-Web Programming-Lecture Slides and more Slides Web Programming and Technologies in PDF only on Docsity!

COMP519: Web Programming

Autumn 2011

Basic HTML

 hypertext

 tags & elements

 text formatting

 lists, hyperlinks, images

 tables, frames

 cascading style sheets

Hypertext & HTML

• HyperText Markup Language (HTML) is the language for specifying the static

content of Web pages (based on SGML, the Standard Generalized Markup

Language)

 hypertext refers to the fact that Web pages are more than just text

can contain multimedia, provide links for jumping within the same document & to other

documents

 markup refers to the fact that it works by augmenting text with special symbols (tags) that

identify the document structure and content type

My intention is that you design your webpages to the XHTML 1.

Strict standard (or better).

If you want, you can also use the HTML 5 specification (which, for

the material I teach in this module, is largely the same, but adds

additional features for some multimedia support).

I will be enforcing this standard in your assessments (as

much as possible).

More will be said when I discuss Document Type Declarations

(soon).

In this course…

Web Development Tools

• many high-level tools exist for creating Web pages

e.g., Microsoft FrontPage, Netscape Composer, Adobe PageMill,

Macromedia DreamWeaver, HotDog, …

also, many applications have "save to HTML" options (e.g., Word)

for most users who want to develop basic, static Web pages, these are fine (but many of these

programs produce very poorly structured HTML code)

• assembly language vs. high-level language analogy

 may want low-level control

 may care about size/readability of pages

 may want to "steal" page components and integrate into existing pages

 may want dynamic features such as scripts or applets

 remote editing of web pages may only be possible using a basic text editor

 sticking to (internationally and industrially) agreed upon standards will help ensure

your web documents are rendered as you intend them to look and operate as you

desire

• so, why are we learning low-level HTML using a basic text editor?

Structural Elements

• an HTML document has two main structural elements

 HEAD contains setup information for the browser & the Web page

e.g., the title for the browser window, style definitions, JavaScript code, …

 BODY contains the actual content to be displayed in the Web page

HTML documents begin and end with

and tags

Comments appear between

HEAD section enclosed between

and tags

BODY section enclosed between

and

* Find more info on HTML docs!

view page

 The element is where you include a element (that appears in

the title bar of the browser).

You can also include lots of other type of information in the <head> element.

o Cascading Style sheet information, or a link to an external style sheet (or several)

o “Meta” data, such as who authored the page, the type of content, and clues that

search engines may (or may not) use to help categorize your page

o JavaScript code

The <body> element contains the main bulk of the material to be displayed on

the webpage.

o Paragraphs

o Tables and lists

o Images

o JavaScript code

o PHP code can be included here too (if passed through a PHP parser)

o Other embedded objects

<head> and <body> elements

Separating Blocks of Text