HTML Elements and Formatting: A Comprehensive Guide, Slides of Web Programming and Technologies

Download HTML Elements and Formatting: A Comprehensive Guide and more Slides Web Programming and Technologies in PDF only on Docsity!

Web Engineering

(HTML)

Lecture # 4

Contents ■ HTML Tags  (^) Q, BLOCKQUOTE, ABBR, ADDRESS, BDO, KBD, SAMP, CODE, VAR, ■ HTML Comments ■ (^) HTML Colors ■ (^) HTML Fonts ■ (^) Character Entities

for Quotations■ The HTML element defines a section that is quoted from another source. ■ (^) Browsers usually indent elements. ■ (^) The HTML tag is used for indicating long quotations (i.e. quotations that span multiple lines).

Browsers generally render blockquote text as indented text. If your quoted text needs to display within a non-quoted paragraph, you should use the HTML q tag.

HTML for Abbreviations ■ The HTML element defines an abbreviation or an acronym. I am a student of SE department. ■ (^) Output I am a student of SE department. ■ (^) When you mouse over SE , Software Engineering will be displayed in a tooltip.

for Bi-Directional Override

■ (^) The HTML element defines bi-directional override. ■ (^) This element is used to override the current text direction: Malakand ■ (^) Output dnakalaM

Computer Code Formatting ■ (^) HTML normally uses variable letter size and spacing. ■ This is not what we want when displaying computer code. ■ (^) The , , and elements are all displayed in fixed letter size and spacing. ■ These tags are not deprecated, but it is possible to achieve richer effect with CSS. We can style each one separately with CSS.

For Computer Output ■ (^) The HTML element defines sample output from a computer program:

samp element represents sample output from a program:

Result = 30

■ (^) Output samp element represents sample output from a program: Result = 30

For Computer Code■ (^) The HTML element defines a piece of programming code. ■ (^) To preserve extra whitespace and line-breaks, use tag.

Programming code example:

var x = 5;
var y = 6;
cout<<"Result= "<< x + y;

■ Output Programming code example: var x = 5; var y = 6; cout<<"Result= "<< x + y;

HTML Comments ■ (^) Comment tags are used to insert comments in the HTML source code. ■ Comments are not displayed by the browser, but they can help document your HTML source code.

HTML Colors ■ In HTML, a color can be specified by using a color name, an RGB value, or a HEX value. ■ (^) Color Names  (^) For example White, Black, Red, Green, Blue, Yellow etc.

HTML Colors (Cont…) ■ For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the others are set to the lowest value (00). ■ (^) #00FF00 is displayed as green ■ (^) #0000FF is displayed as blue ■ (^) #000000 is displayed as black ■ (^) #FFFFFF is displayed as white.

HTML Fonts ■ The element is used to specify the characteristics of font, i.e. font size, font face and color of text: ■ (^) Attributes Attrib ute Value Description color rgb(x,x,x) #xxxxxx colornam e Not supported in HTML5. Specifies the color of text face Font family Not supported in HTML5. Specifies the font of text size Values from 1 to 7 Not supported in HTML5. Specifies the size of text

Character Entities Result Description Entity Name non-breaking space
< less than < > greater than > & ampersand & " double quotation mark " ' single quotation mark (apostrophe) ' ¢ cent ¢ £ pound £ × multiplication × ÷ division ÷ © copyright ©