HTML Headings, Line Breaks, Paragraphs, and Display Tags in Web Engineering, Slides of Web Programming and Technologies

Download HTML Headings, Line Breaks, Paragraphs, and Display Tags in Web Engineering and more Slides Web Programming and Technologies in PDF only on Docsity!

Web Engineering

(HTML)

Lecture # 3

Contents ■ Headings ■ Line Break ■ Paragraphs ■ HTML Display Tags  (^) PRE, B, STRONG, I, EM, SMALL, MARK, DEL, INS, SUB, SUP, HR

Headings Are Important ■ (^) It is important to use headings to show the document structure. ■ Search engines use the headings to index the structure and content of your web pages. ■ (^) Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Heading Attributes Attribut e Value Description align left center right Not supported in HTML5. Specifies the alignment of a heading

Line Breaks ■ (^) The HTML
element defines a line break. ■ Use
if you want a line break (a new line) without starting a new paragraph: ■ (^) The
tag is an empty tag, which means that it has no end tag. Software
Engineering

Paragraphs ■ (^) The

element defines a paragraph : ■ (^) Browsers automatically add some white space (a margin) before and after a paragraph. The margins can be modified with CSS (with the margin properties). ■ The syntax for the

tag is:

This is a paragraph.

Don't Forget the End Tag ■ Most browsers will display HTML correctly without using the end tag. ■ E.g.

This is a paragraph. ■ (^) The example above will work in most browsers, but do not rely on it. ■ (^) Dropping the end tag can produce unexpected results or errors in some browsers.

HTML Display ■ (^) You cannot be sure how HTML will be displayed. ■ (^) Large or small screens, and resized windows will create different results. ■ (^) With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. ■ (^) The browser will remove any extra spaces and extra lines when the page is displayed:

This paragraph contains a lot of lines in the source code, but the browser ignores it.

and Elements ■ (^) Both have the same effect but ■ The HTML element defines bold text, without any extra importance. ■ (^) The HTML element defines strong text, with added semantic "strong" importance.

This text is normal.

This text is bold.

This text is strong.

and Elements ■ Actually both have the same effects but ■ The HTML element defines italic text, without any extra importance. ■ The HTML element defines emphasized text, with added semantic importance.

This text is normal.

This text is italic.

This text is emphasized

Element ■ (^) The HTML element defines marked or highlighted text: ■ E.g.

Long LivePakistan

Element ■ (^) The HTML element defines deleted (removed) text. E.G

I am in third fourth semester.

Element ■ The HTML element defines subscripted text.

nlogn

Element ■ The HTML element defines superscripted text.

I am in 4th semester