1. 1 Web Engineering Lecture 1-2

2. HTML Title of page This is my first homepage.

3. H EAD E LEMENT The HEAD section of an HTML document is like a front matter of a book. HEAD tag always keep behind the HTML tag. Things are going in the HEAD section, consider to be META data content model these includes TITLE, META, LINK, STYLE, SCRIPT and BASE elements.

4. E XAMPLE Title of page This is my first homepage. This text is bold 4

5. T ITLE E LEMENT The TITLE element is used for setting title of a document. Title element is required in HTML even its empty. There may be only one TITLE element in a web page. Example: Title of page 5

6. L INK E LEMENT LINK element is used to have relationship with other documents. LINK tag is used to add external style sheet. Link is also used to place a small image at title portion of the web page. Example: Title of page <link href="scissors-small.png" type="image/gif" rel="shortcut icon" /> 6

7. S TYLE E LEMENT STYLE element is used to embed style sheet on a same web page. Example: Title of page p { line-height: 1.2; } p.first:first-line { font-variant: small-caps; } 7

8. M ETA T AG META tag is used to describe various aspects of your HTML page. META means its data about data. It helps search engine to categorize your page. The data that can not be display on web page, but can be used by various process. Like web server deliver it or user web browsers. 8

9. E XAMPLE Title of page It describes the character being used by this document. So browser can display properly. Second META tag will wait for 5 seconds and then redirect to this course web page. 9

10. S EARCH E NGINE O PTIMIZATION The concept of search engine optimization is interesting widely misunderstood subject. There are people who tell you that they can increase search ranking of your page. So your page show higher in search engine listing. But most part this is not true. Any technique that can effectively submit search engine today will not work tomorrow because the engineers at search engine company update their algorithms to defeat those technique. 10

11. E XAMPLE Keywords meta tag is originally designed to help the search engine by allowing content authors to categorize their contents. But this feature is abused so badly, that search engine have stopped using it. So its largely ignored today by major search engines. 11

12. E XAMPLE Bill’s Amazing New Page! - * - * - * - Amazing, New, Bill, Page, Web site, C++ Tutorials, blah blah blah So, SEO focus start abusing the title tag by putting the same garbage in the title tag. Now search engine algorithms of course ignore this too. 12

13. The goal of search engine is to provide useful results to users. They want to categorize your page correctly and want to rank it according to its actual popularity. The HTML5 have good set of tags for making it easier for search engines to read and understand your page. 13

14. L INE B REAK T AG Normally your browser will decide, where to break the line and paragraphs. You may force a line to break using the tag. Example: The attackers set about acquiring the control over the computers to be used in the attack. By scanning using Sscan SW, a large numbers of computers attached to the Internet. Once a computer with a weak security scheme is identified, the attackers try a break-in. 14

15. F ONT E LEMENT Sometimes you tell browser to show text something in a different way. Can of course use CSS for this often as best choice. HTML does however provide few simple elements, case where you need something just simple. 15

16. Bold Italic Underline This is a subscript This is a superscript This is a small 16

17. H IGHLIGHTING T EXT HTML provides new inline element called MARK to highlighting text. Example: The attackers set about acquiring the control over the computers to be used in the attack. By scanning using Sscan SW, a large numbers of computers attached to the Internet. Once a computer with a weak security scheme is identified, the attackers try a break-in. 17

18. EXAMPLE Example: The attackers set about acquiring the control over the computers to be used in the attack. By scanning using Sscan SW, a large numbers of computers attached to the Internet. Once a computer with a weak security scheme is identified, the attackers try a break-in. 18

19. H EADING T AGS Heading elements are available at six level. Heading is block level element. Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 19

20. Q UOTATIONS AND Q UOTE M ARKS Example: The attackers set about acquiring the control over the computers to be used in the attack. "By scanning using &apos;Sscan&apos; SW", a large numbers of computers attached to the Internet. Once a computer with a weak security scheme is identified, the attackers try a break-in. 20

21. PRE-FORMATTED TEXT PRE tag is used for pre-formatting text and it is useful to display text in its natural format. Example: This text is preformatted and should be displayed in a particular way and shape without any reformatting by the browser. 21

22. E XAMPLE Example: int main (int argc, char ** argv ) { printf("Hello World!\n"); return 0; } 22

23. E XAMPLE Example: <html > <head > <meta charset="UTF-8" /> <title > HTML preformatted Text </title> </head> <body> <h1> HTML Preformatted Text </h1> </body > </html > 23