HTML Basics and CSS style

Web design and programming

HTML Basics

Lecture 1

Dr. Sundos Alazawi

مسائي/ المرحلة الثالثة

2021-2022

2

Hypertext Markup Language

Markup language:

Embedded codes in documents

Codes are called `tags’

Codes

Describe the structure documents

Include instructions for processing

Computer language for describing syntax of tags

HTML:make for publishing hypertext on the World Wide Web

Allow to embed other scripting languages to manipulate

design layout, text and graphics

Platform independent

Web Page Development Cycle

EDIT and SAVE the file in your AFS

p:\web\index.html

TEST by BROWSING to the page

http://www.msu.edu/~msunetid/index.html

Step 1: Open Notepad

Windows 8 or later:

Open the Start Screen (the window symbol at the

bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit

In Preferences > Format > choose"Plain Text"

Write HTML Using Notepad

5

Write HTML Using Notepad

Step 2: Write Some HTML

Write HTML into Notepad.

HTML File

Step 3: Save the HTML Page

HTML File

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser

An HTML element starts and ends with tags—the opening tag and the closing tag.

1. Tag consists of an opening angled bracket (<), some text, and a closing bracket (>).

2. Inside a tag, there is a tag name; there may also be one or more attributes

Tags <html><body> <head>….etc

Tags

Attribute

Each attribute is made up of a name and a

value, name="value“

10

HTML Basics

3 Parts to HTML document

DOCTYPE

What DTD are you using

Head

Meta information

Only <title> is required

Body

Text to render

HTML File Structure

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

HTML ElementsThere are two major sections inside the html element: the head and the

body.

HTML Elements

Head ElementBody Element

Title ElementMeta Element

CSS markupJava Script

Paragraphs ImagesLink

Table, frame, form, etc….

Head elementHead element contains information about the page, but no

information that will be displayed on the page itself.

The opening<head> and closing tags </head>

Title element tells the browser what to display in its title bar

(the title bar is the very top part of the browser window)

The opening<title> and closing tags </title>

Meta element can be used in a web page for different

reasons. Some are used to provide additional information

that’s not displayed on screen to the browser or search

engines

for example: <meta charset="utf-8"/>

Structural Tags

<HTML>

These tags enclose the entire Web page document.

</HTML>

<HEAD>

These tags enclose the Head part of the document

</HEAD>

<TITLE>

These tags enclose the title of the document. This text

appears in the title bar in the browser and on the bookmark

list if someone bookmarks your web page.

</TITLE>

Example1

<head>

<title>Computer Sciences </title>

<meta charset="utf-8"/>

</head>

Header Tags

Header Tags -- Used for marking sections and

subsections in a document.

<H1>Header 1 -- Giant-sized and bold </H1>

<H2>Header 2 -- Large and bold </H2>

<H3>Header 3 -- Normal-sized and bold </H3>

<H4>Header 4 -- Small and bold </H4>

<H5>Header 5 -- Very Small and bold </H5>

<H6>Header 6 -- Tiny and bold </H6>

H1 = Giant-sized and bold

H2 = Large and bold

H3 = Normal-sized and bold

H4 = Small and bold

H5 = Very Small and bold

H6 = Tiny and bold

Body element

Body element contains almost everything

that you see on the screen: headings,

paragraphs, images, any navigation that’s

required, and footers that sit at the bottom of

the web page

Example2<HTML>

<HEAD>

<TITLE> My First home page

</TITLE>

</HEAD>

<BODY>

My name is your name.

My major is your major.

</BODY>

</HTML>

HTML Basics and CSS style

Documents