internet applications development lecture 2 l. obead alhadreti
TRANSCRIPT
![Page 1: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/1.jpg)
Internet Applications Development
Lecture 2
L. Obead Alhadreti
![Page 2: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/2.jpg)
Lecture Outline:
• Basic Format of HTML document• Text Formatting
![Page 3: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/3.jpg)
Internet programming Languages
• There are two types of Internet programming Languages:– Client-side programming languages, such as
HTML , java script. – Server-side programming languages, such as
ASP , JSP, PHP
![Page 4: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/4.jpg)
![Page 5: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/5.jpg)
• HTML stands for HyperText Markup Language• Used to design web pages and format text and information.• Marked up with elements, delineated by tags.• Client-side programming language
HTML
![Page 6: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/6.jpg)
What will you need?1. Text editor: to write the HTML instructions.
for example: Notepad
2. Browser: The browser interprets your instructions and displays the result. For example: Internet Browser.
• HTML files
– .htm or .html extensions– Name your files to describe their functionality– File name of your home page should be
index.html
![Page 7: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/7.jpg)
Advantages of HTML
• Flexible language: all you need is a text editor to write the instructions.
• easy to learn• Free• Bugs fixed easily
![Page 8: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/8.jpg)
Basic HTML document Format
![Page 9: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/9.jpg)
HTML Element
![Page 10: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/10.jpg)
Important Notes
• Some html elements have no closing tag.• Some html elements have no content.• Some html elements have more than one attribute
divided by comma.• The values should be sounded by caution marks
“”. • HTML is not case sensitive.• Good practice to keep all the letters in one case.
![Page 11: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/11.jpg)
HTML element HTML element• Always include the <HTML>…</HTML> tags at the beginning
and end of the HTML instructions. • The <html> tag tells the browser that this is an HTML document. • The <html> tag is the container for all other HTML elements.
• The <html> element supports the following attributes:
![Page 12: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/12.jpg)
Head Element HEAD element
• Includes information about the document.• Information in header not generally rendered in
display window.• Starts with <head> and ends with </head>.
![Page 13: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/13.jpg)
Title Element Title element• The <title> element defines the title of the
document.• The title element:
– defines a title in the browser toolbar – provides a title for the page when it is added to
favorites – displays a title for the page in search-engine results
![Page 14: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/14.jpg)
Body Element– BODY element
• The <body> tag defines the document's body. • The area you place all content you would like browsers to
display.• Includes text, images, links, forms, etc.• The <body> element supports the following attributes:
Description Value Attribute
Specifies the background color of a document
Color name bgcolor
Specifies a background image for a document
URL background
Specifies the color of the text in a document
Color name text
![Page 15: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/15.jpg)
. HEAD section
TITLE element
. BODY section
P element
<HTML><!-- Our First Web Page --><HEAD><TITLE>Internet and WWW - Welcome</TITLE></HEAD>
<BODY>
Welcome to Our Web Sitce!
</BODY></HTML>
![Page 16: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/16.jpg)
Comments
• The comment tag is used to insert comments in the source code.
• Comments are not displayed in the browsers.• You can use comments to explain your code, which can
help you when you edit the source code at a later date. This is especially useful if you have a lot of code.
• The comment form <!-- text -->• Example: <!-- this code is to display an image -->
![Page 17: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/17.jpg)
Formatting Text
![Page 18: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/18.jpg)
Font element• <font> </font> • Used to specify the type, color, and size for particular
text.• The <font> element supports the following attributes:
Description Value Attribute
Specifies the color of the font Color name color
Specifies the size of the font 1-7 Size
Specifies the type of the font font name face
Example: <font face=“traditional Arabic” ، color=“green” ، size=“4”> Hello world </font>
![Page 19: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/19.jpg)
Examples:
![Page 20: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/20.jpg)
Formatting Tags
result aim Tags
Text Bold text >b> text </b<
Text Italic text >i> text </i<
text Underlined text >u> text </u<
sCtCrCiCkCeC Strikethrough text >s> strike </s<
![Page 21: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/21.jpg)
More than one formatting tags
![Page 22: Internet Applications Development Lecture 2 L. Obead Alhadreti](https://reader037.vdocument.in/reader037/viewer/2022103112/551a9834550346761a8b5ba7/html5/thumbnails/22.jpg)
Next lecture
• Text formatting.• Paragraphs formatting