Scribd
Upload
20 views14 pages

452 - WD1 - Lectures - 01

- HTML (Hypertext Markup Language) is the basic code for marking up web page contents using tags. It describes the structure of a web page. - Web browsers like Chrome, Firefox, and Edge read HTML documents and display them, but do not display the HTML tags themselves. - Static web pages have content that remains the same until manually changed, while dynamic pages have content that varies for different visitors using databases and server-side programming.

Uploaded by

M A
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views14 pages

452 - WD1 - Lectures - 01

- HTML (Hypertext Markup Language) is the basic code for marking up web page contents using tags. It describes the structure of a web page. - Web browsers like Chrome, Firefox, and Edge read HTML documents and display them, but do not display the HTML tags themselves. - Static web pages have content that remains the same until manually changed, while dynamic pages have content that varies for different visitors using databases and server-side programming.

Uploaded by

M A
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Web Development 1

Lecture 01: HTML Introduction

Dr. Majdah Alsharif © 2023


What is HTML

• Its stands for Hyper Text Markup Language

• It’s the basic code for marking up page contents (text, image, video, etc…) using HTML markup
tags

• It describes how a web page is structured by defining the different sections it may have (header,
content area, footer)

• It first appeared in 1991, and the current version is 5.0


Web Browsers

• the purpose of a web browser (Chrome, Microsoft Edge, Firefox, … etc) is to read HTML
documents and display them

• The browser does not display the HTML tags but uses them to determine how to display the
document
Static & Dynamic Web Page

Static Page Dynamic Page


Pages will remain same until someone changes it Content of pages are different for different visitors
manually
Pages are simple Pages are complicated
Information change rarely Information change frequently
A static page loads faster than dynamic page A dynamic page loads slower than static page
database is not used database is used
written in languages such as: HTML, JavaScript, CSS, etc written in languages such as: CGI, AJAX, ASP, PHP, etc
does not contain any application program contains application program for different services
require less work and cost in designing them require more work and cost in designing them
Static & Dynamic Web Page

Static Page Dynamic Page


HTML Editors

• HTML can be edited using normal text processing programs like MS Word

• Using a professional HTML editor is recommended (this course uses notepad++) such as:
HTML Tags

• They are keywords surrounded by angle brackets < >

• They defines how web browser will format and display the content

• In HTML5, tags are not case sensitive, but lowercase is recommended


HTML Elements

• HTML documents (pages) are made up by HTML elements

• HTML elements are written with a start tag, an end tag, and the content in between

• Syntax
<tagname>content</tagname>
Example 1

HTML in editor HTML in browser


HTML Nested Elements

• Nested elements mean elements can contain other elements

• Example 1 contains 5 HTML elements:

1) The html element has contents (the head and body elements)

2) The head element has a content (the title element)

3) The body element has a content (the p element)

4) The title element has a content (example 1)

5) The p element has a content (hello world)


The Structure of HTML Document

1) <!DOCTYPE> Declaration

2) The html Element

3) The head Element

4) The body Element


The Structure of HTML Document

1) <!DOCTYPE> Declaration
 It must be the first thing in your HTML document

 It is not an HTML tag

 It is an instruction for the browser telling it what version of HTML the document is written in so it can
follow its specifications

 Syntax
<!DOCTYPE html>
The Structure of HTML Document

2) The html Element


 It is the document's root element

 It tells the browser that this is an HTML document

 It is the container for all other HTML elements (except <!DOCTYPE>)

 Syntax
<html>content</html>
The Structure of HTML Document

3) The head Element


 It must include a title for the document, and may have other things such as scripts, styles, meta
information, and more

 Syntax
<head>content</head>

4) The body Element


 It contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc

 Syntax
<body>content</body>

You might also like