Download presentation
Presentation is loading. Please wait.
1
Client-Side Internet and Web Programming
Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side Internet and Web Programming Adding a Content CHAPTER 3 Prepared by: R. Kansoy
2
Contents 3.1 Working With Text 3.2 Page Formatting 3.3 Creating Links
3.4 Adding Images
3
3.1 Working With Text Headings
Headings are used to define the headers of the HTML document HTML offers six different levels of headings. <h1>..</h1> <h2>..>/h2> <h3>..</h3> <h4>..</h4> <h5>..</h5> <h6>..</h6> While <h1> defines the largest (most important) heading, <h6> defines the smallest (least important) heading. Browsers automatically add some white space (a margin) before and after a heading. Search engines use the headings to index the structure and content of your web pages.
4
3.1 Working With Text Headings Example Output Note:
<!DOCTYPE html> <html> <body> <h1>ITEC229</h1> <h2>ITEC229</h2> <h3>ITEC229</h3> <h4>ITEC229</h4> <h5>ITEC229</h5> <h6>ITEC229</h6> </body> </html> Note: Use HTML headings for headings only Don't use headings to make text BIG or bold.
5
3.1 Working With Text Paragraphs
<p>..</p> tags used to define a paragraph in HTML document Browsers automatically add some white space (a margin) before and after a paragraph. Example Output <!DOCTYPE html> <html> <body> <p>This is the 1. paragraph.</p> <p> And this is the 2. paragraph.</p> </body> </html>
6
3.1 Working With Text Text Formatting Elements
Formatting elements were designed to display special types of text: <b> - Bold text, without any extra importance <strong> - Important text, with added semantic "strong" importance <i> - Italic text, without any extra importance <em> - Emphasized text, with added semantic importance <u> - Represents some text that should be stylistically different from normal text, such as misspelled words <ins> - Inserted text <mark> - Marked text <small> - Small text <del> - Deleted text <sub> - Subscript text <sup> - Superscript text Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is "important".
7
3.1 Working With Text Text Formatting Elements Example Output
<DOCTYPE html> <html> <body> <p>This text is normal.</p> <p>This text is <b>bold.</b></p> <p>This text is <strong>strong.</strong></p> <p>This text is <i>italic.</i></p> <p>This text is <em>emphasized.</em></p> <p>This text is <u>misspselled.</u></p> <p>This text is <ins>inserted.</ins></p> </body> </html>
8
3.1 Working With Text Text Formatting Elements Example Output
<!DOCTYPE html> <html> <body> <p>This text is <mark>Marked</mark> or <mark>Highlighted</mark></p> <p>This is a <small>Small Text</small></p> <p>This text is <del>Removed</del> or <del>Deleted</del></p> <p>This is <sub>subscript</sub> and <sup>superscript</sup></p> </body> </html>
9
3.1 Working With Text Font, Size and Color of a Text (HTML4 !!!)
The <font> tag specifies the font face, font size, and color of text. Face, Size and Color are the attributes of the <font> tag. Face; Font of the text you are formatting Be careful to use common fonts like Times, Arial, Verdana Browser will display the text in a default font if it is unable to display specified font Size; Specifies the size of the text inside a <font> element Default text size is 3 (16px) for the browser To make text larger, set size to 4/5/6/7 To make text smaller, set size to 2/1/-1/-2
10
3.1 Working With Text Font, Size and Color of a Text (HTML4 !!!)
Specifies the color of the text inside a <font> element. <font color="color_name/hex_number/rgb_number"> Attribute Values Value Description color_name Specifies the text color with a color name (like "red") hex_number Specifies the text color with a hex code (like "#ff0000") rgb_number Specifies the text color with an rgb code (like "rgb(255,0,0)") !!! The <font> tag and its face, size and color attributes are not supported in HTML5. Use CSS instead.
11
3.1 Working With Text Font, Size and Color of a Text (HTML4 !!!)
Example <!DOCTYPE html> <html> <body> <P><FONT COLOR="purple" SIZE="5" FACE="Arial">This text is larger and purple.</FONT></P> <P>This is a text in a default font, size and color. </P> <P><FONT COLOR="green" SIZE="1" FACE="Verdana">This text is smaller and green.</FONT></P> <P><FONT COLOR="red" SIZE="6" FACE="Helvatica"> <strong>Note:</strong>The font element is not Supported in HTML5. Use CSS instead.</P> </body> </html>
12
3.1 Working With Text Font, Size and Color of a Text (HTML4 !!!)
Output
13
3.1 Working With Text Alignment of a Text (HTML4 !!!)
<CENTER> tag used for centering the text on the page. The align attribute specifies the alignment of the text Attribute Values Value Description left Left-align text right Right-align text center Center-align text justify Stretches the lines so that each line has equal width !!! The <CENTER> tag and ALIGN attribute are not supported in HTML5. Use CSS instead.
14
3.1 Working With Text Alignment of a Text (HTML4 !!!) Example
<!DOCTYPE html> <html> <body> <CENTER><H2>This header is CENTERED.</H2></CENTER> <H3 align="left">This header is LEFT-aligned.</H3> <H4 align="right">This header is RIGHT-aligned.</H4> <P align="center">This paragraph is CENTER-aligned.</P> <P align="justify">This paragraph is JUSTIFIED. This paragraph is JUSTIFIED. This paragraph is JUSTIFIED. This paragraph is JUSTIFIED.This paragraph is JUSTIFIED. This paragraph is JUSTIFIED. This paragraph is JUSTIFIED. This paragraph is JUSTIFIED. This paragraph is JUSTIFIED. This paragraph is JUSTIFIED. This paragraph is JUSTIFIED. </P> </body> </html>
15
3.1 Working With Text Alignment of a Text (HTML4 !!!)
Output !!! The <CENTER> tag and ALIGN attribute are not supported in HTML5. Use CSS instead.
16
3.1 Working With Text Special Characters (Symbol Entities)
There are times when it becomes necessary to display characters and symbols that are not available on a standart keyboard such as copyright sign or that have special meaning in HTML (<,>, &, etc.) To accomplish this, HTML uses Special Character Entity tag. To add such symbols to an HTML page, you can use an HTML entity name. If no entity name exists, you can use an entity number, a decimal, or hexadecimal reference. The tag takes the format of an ampersand (&), followed by the name/code and a semicolon. There are literally hundreds of special charactes entities currently available.
17
3.1 Working With Text Special Characters (Symbol Entities)
A few of the more common character entities are listed below; Symbol Description Entity Name Entity Number non-breaking space < less than < > greater than > & ampersand & & " double quotation mark " " ' single quotation mark ' ' cent pound yen € euro € €
18
3.1 Working With Text Special Characters (Symbol Entities)
Description Entity Name Entity Number copyright registered trademark fraction one quarter fraction one half fraction three quarters Be carefull!!! Entity names are case sensitive. Advantage of using an entity name: An entity name is easy to remember. Disadvantage of using an entity name: Browsers may not support all entity names, but the support for numbers is good.
19
3.2 Page Formatting Adding a Line Break
By default, browsers ignore many formatting keystrokes that we take for granted. Exaples include the "Enter" and "Tab" keys and multiple uses of the spacebar. To accomplish the same tasks in HTML, page formatting tags are used. Web browsers wrap text automatically to the next line when the current line reaches the right side of the browser. If you want to avoid wrapping and begin text on a new line <BR> tag sould be used. The <BR> tag doesn’t have an end tag. Additional lines between paragraphs can also be added by using <BR> tag. Each tag creates another blank line.
20
3.2 Page Formatting Adding a Line Break Example Output
<!DOCTYPE html> <html> <body> ITEC229 Client-Side Internet and Web Programming<br><br> ITEC229 <br> Client-Side Internet and Web Programming <p>ITEC229 <br> Client-Side Internet and Web Programming</p> </body> </html> Output
21
3.2 Page Formatting Inserting Blank Space
Any blank spaces that you type in your text (beyond a single space between words) are ignored by browser. You must code your desired blank spaces into your document. You must use the entity for each space you wish to add. For example, if you want to add multiple spaces between specific words, type in the appropriate amount of entities without any spaces between them.
22
3.2 Page Formatting Inserting Blank Space Example Output
<!DOCTYPE html> <html> <body> <p>ITEC </p> <p>This would add five blank spaces</p> </body> </html> Output
23
3.2 Page Formatting Preformatted Text
The <pre>..</pre> tags allow you to maintain the integrity of the spacing and formatting of your text so that browsers will display it as you have typed it. If you want to avoid some of the repetitive coding that comes with multiple spacing in your document, you can use the preformatted tags <pre>..</pre>.
24
3.2 Page Formatting Preformatted Text Example Output
<!DOCTYPE html> <html> <body> <p>ITEC229: Client-Side Internet and Web Programming</p> <pre> ITEC229: Client-Side Internet and Web Programming<br> ITEC230: Rich Internet Applications (RIA) Development<br> ITEC327: Server-Side Internet and Web Programming<br> </pre> </body> </html> Output
Similar presentations
