برمجة تطبيقات االنترنت PDF

‫برمجة تطبيقات االنترنت‬ ‫أ ‪.‬وعد ناصر‬ Lecture Content 01 HTML Text Formatting 02 HTML –styling Att 03 HTML –styling with CSS H TML D OCUMENT S TRUCTURE Hierarchical < ! D O C T Y P E html> Page Title My First Heading My first p...

‫برمجة تطبيقات االنترنت‬ ‫أ ‪.‬وعد ناصر‬ Lecture Content 01 HTML Text Formatting 02 HTML –styling Att 03 HTML –styling with CSS H TML D OCUMENT S TRUCTURE Hierarchical < ! D O C T Y P E html> Page Title My First Heading My first paragraph. HTML Page Structure H TML Text formatting 01 H TML T EXT F ORMATTING E LEMENTS H T M L defines special elements, for defining text with a special meaning. Formatting elements were designed to display special types of text: ❖ Bold text ❖ Small text ❖ strong text (important ) ❖ Deleted text ❖ Italic text ❖ Inserted text ❖ Emphasized text ❖ Subscripts ❖ Marked text ❖ Superscripts B OLD T EXT The H T M L element defines bold text, without any extra importance. This text is normal. This text is bold. I TALIC T EXT The H T M L element defines italic text, without any extra importance. This text is normal. This text is italic. STRONG T EXT The H T M L element defines strong text, with added semantic “strong” importance. This text is normal. This text is strong. EMPHASIZED TEXT The H T M L element defines emphasized text, with added semantic importance. This text is normal. This text is emphasized. E XAMPLE ABOUT T EXT : and are explicit - they specify bold and italic respectively. and are semantic -they specify that the enclosed text should be "strong" or "emphasised" in some way, usually bold and italic, but allow for the actual styling to be controlled via CSS. U NDERLINE T EXT The H T M L element defines underlined text. This text is underlined. P RE -F ORMA TT ED T EXT The H T M L element defines a block of pre- formatted text, with structured spaces and lines. To display anything, with right spacing and line- breaks, you must wrap the text in a element: This text is not formatted This text is not formatted SMALL AND MARKED ❖ The H T M L element defines small text: HTML smallFormatting ❖ The H T M L element defines marked or highlighted text: HTML Marked Formatting D ELETED AND I N S E R T E D ❖ The H T M L element defines deleted (removed) of text. My favorite color is bluered ❖ The H T M L element defines inserted (added) text. My favorite color is red S UBS CRIPT AND SUP ERSCRIP T ❖ The H T M L element defines subscripted text. ❖ The H T M L element defines superscripted text. This is subscripted text, and this is superscripted text HTML TAG: FOR SHORT QUOTATIONS Browsers usually insert quotation marks around the element. Inventor of WWW Tim Berners-Lee says: In those days, there was different information on different computers, but you had to log on to different computers to get at it. Also, sometimes you had to learn a different program on each computer. Often it was just easier to go and ask people when they were having coffee HTML: FOR ABBREVIATIONS The HTML element defines an abbreviation or an acronym. Marking abbreviations can give useful information to browsers, translation systems and search-engines. The WWW was invented by Tim Berners-Lee HTML Comment TAG You can add comments to your H T M L source by using the following syntax: Comments are not displayed by the browser, but they can help document your H T M L. H TML Style–HTML Continuation of the previous lecture …… 02 HTML STYLES Every H T M L element has a default style (background color is white, text color is black, text-size is 12px...) Changing the default style of an H T M L element, can be done with the style attribute The H T M L Style Attribute: style ="property : value" H TML D OCUMENT S TYLE Hierarchical < ! D O C T Y P E html> My First Heading My first paragraph. H TML TEXT COLOR The color property defines the text color to be used for an H T M L element < ! D O C T Y P E html> This is a heading This is a paragraph H TML TEXT F ONTS The Font- family property defines the font to be used for an H T M L element < ! D O C T Y P E html> This is a heading This is a paragraph H TML TEXT S IZE The Font- size property defines the text size to be used for an H T M L element < ! D O C T Y P E html> This is a heading This is a paragraph H TML TEXT A LIGNMENT The text-align property defines the horizontal text alignment for an H T M L element < ! D O C T Y P E html> Centered Heading This is a paragraph H TML Style–CSS styling elements in the web page , describe the style of HTML document 03 Styling HTML WITH CSS CSS stands for Cascading Style Sheets Styling can be added to HTML elements in 3 ways: ❖Inline - using a style attribute in HTML elements. ❖Internal - using a element in the HTML section. ❖External - using one or more external CSS files. CSS Syntax CSS styling has the following syntax element { property:value ; property:value } Multiple styles are separated with semicolon. The most common way to add styling, is to keep CSS syntax in separate CSS files. 1. Inline Styling (Inline CSS) Inline styling is useful for applying a unique style to a single HTML element. Inline styling uses the style attribute. < ! D OCTY P E html> This is a Blue Heading 2. Internal Styling (Internal CSS) Internal style used to define a common style for all HTML elements on a page. Internal styling is defined in the section, using a element: < ! D O C T Y P E html> body {background-color:lightgrey ; } h1 {color:blue ; } p {color:green ; } My First Heading My first paragraph. 3. External Styling (External CSS) External style sheet is ideal when style is applied to many pages. With external style sheets, you can change the look of an entire site by changing one file. External styles are defined in the section of an HTML page, in the element. < ! D O C T Y P E html> My First Heading My first paragraph. External Styling (External CSS) 1. The external style sheet should not contain any html tags. 2. The style sheet file must be saved with a.css extension. 3. An example of a style sheet file called "myStyle.css", is shown below: body { background-color: brown; } h1 { color : navy ; margin-left : 20 px ; } The ID Attribute 1) CSS styles define an equal style for all equal elements. 2) To define a special style for a special element, you need to add an id attribute to the element. define a different style for the (identified) element: p#p01 { color : blue ; margin-left : 20 px ; } Iam different Example of ID Attribute < ! D O C T Y P E html> p#p01 { color: blue ; } This is a paragraph. I am different. The CLASS Attribute To define a style for a special type (class) of elements, add a class attribute to the element. p.error{ color : blue ; margin-left : 20 px ; } Iam different Example of CLASS Attribute < ! D O C T Y P E html> p.error { color: red ; } This is a paragraph.