How the Web Works?

How the Web Works? • WWW use classical client / server architecture – HTTP is text‐based request‐response protocol HTTP Page request HTTP Server response Client running a Server running Web Web Browser Server Software (IE,Firefox ,Opera ,…) (IIS, AhApache, et)tc.) 1 2 Web site What is a Web Page? • There are two kinds of web sites • Web pages are text files containing HTML – Static web sites • HTML – Hyper Text Markup Language • Content of the web site is not changed. – A notation for describing – Dynamic web sites • document structure (semantic markup) • Content of the web site is changed dynamically. • formatting (presentation markup) – Looks (looked?) like: • A Microsoft Word document • The markup tags provide information about the page content structure 3 4 Creating HTML Pages HTML Structure • An HTML file must have an .htm or .html file • HTML is comprised of “tags” extension – Begins with <html> and ends with </html> • HTML files can be created with text editors: • Tags are nested one inside another: – NotePad, NotePad ++, PSPad <html> • Or HTML editors (WYSIWYG Editors): <head> </head> – Microsoft FrontPage <body> – Macromedia Dreamweaver </body> – Netscape Composer </html> – Microsoft Word • HTML describes structure using two main sections: – Visual Studio <head> and <body> 5 6 HTML – Fundamentals HTML Code Formatting Document Structure • The HTML source code should be formatted to < HTML > increase readability and facilitate debugging. Header – Every block element should start on a new line. – Every nested (block) element should be indented. Body – Browsers ignore multiple whitespaces in the page source, so formatting is harmless. • For performance reasons, formatting can be sacrificed < / HTML> 7 8 First HTML Page HTML Tags <html> • HTML tags are keywords (tag names) <head> <title>My First HTML Page</title> surrounded by angle brackets: </head> <tagname>content</tagname> <body> This is some text... • The first tag in a pair is the start tag, the </body> second tag is the end tag </html> • The end tag is written like the start tag, but with a slhlash bfbefore the tag name 9 10 First HTML Page: Tags First HTML Page: Header • Provides extra information about the document <html> Opening tag <head> • Serving as a container for sections such as styles and global scripts. HTML header <title>My First HTML Page</title> <html > </head> <head> <body> Closing tag <title>My First HTML Page</title> This is some tttext... </head> </body> <body> </html> This is some text... An HTML element consists of an opening tag, a closing tag and the content </body> inside. </html> 11 12 First HTML Page: Body HTML Attributes • This is where the visible content of a Web • HTML elements can have attributes document appears. • Attributes provide additional information about an <html> element <head> • Attributes are always specified in the start tag <title>My First HTML Page</title> • Attributes come in name/value pairs </head> like: name="value" <body> This is some text... Ex: </body> <body bgcolor=“yellow”> </html> </body> HTML body 13 14 Paragraphs Align paragraph • Paragraph Tags • tag has align attribute – Delimited by and tags • Align can be right, left, center, justify – Paragraphs in HTML act much like the paragraphs – ex>: in a word processor. – HTML automatically adds an extra blank line before and after a paragraph This is my first paragraph This is my second paragraph 15 16 Headings Manual Break • Standard HTML tags allow six levels of • Uses the line break tag or headings,<h1> through <h6>. • Inserts a line break into a page before the paragraph • The higher the heading number, the smaller break, – i.e. moves to the next line of text and is identified by the web browser the heading. much like pressing the Enter key when working with a word processor. <h1> Headi ng 1< /h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> 17 18 Preformatted Text List • Delimited by <pre> and </pre> tags • Ordered lists: • This tag tells the user agent not to reformat the – Lists whose elements must appear in a certain text within the <pre> block but to render it order. verbatim as it appears in the document. • Each ordered list is encapsulated in ordered list tags (<ol>), and each item within the list is encapsulated in list item tags (<li>). <ol type="1"> <li>Apple</li> <li>Orange</li> <li><li>GrapefruitGrapefruit</li></li> </ol> 19 20 List… List… • Attribute values for type are 1, A, a, I, or i • Unordered lists: – Lists whose elements can appear in any order, 1. Apple – Each unordered list is encapsulated in unordered 2. Orange list tags (<ul>), and each item within the list is 3. Grapefruit encapsulated in list item tags (<li>). i. Apple <ul type="disk"> ii. Orange <li>Apple</li> A. Apple iii. Grapefruit a. Apple I. Apple <li>Orange</li> B. Orange <li><li>GrapefruitGrapefruit</li></li> b. Orange II. Orange C. Grapefruit </ul> c. Grapefruit III. Grapefruit 21 22 List… List… • Attribute values for type are: • Definition lists: – disc, circle or square – Lists that contain two pieces of information a term and a definition of said term – for each list element. – Each definition list is encapsulated in definition list tags (<dl>). • Apple o Apple Apple – The list items consist of a definition term (<dt>), each delimited by its own tag pair. • Orange o Orange Orange • Pear o Pear Pear 23 24 List… HTML Colors • Create definition lists using <dl> • RGB (Red, Green, Blue) – Pairs of text and associated definition; text is in <dt> tag, definition in <dd> tag • With HTML, RGB color values can be specified <dl> using this formula: rgb(red, green, blue) <dt>HTML</dt> <dd>A markup language …</dd> • Each parameter (red, green, and blue) defines <dt>CSS</dt> the iiintensity of the color between 0 and 255. <dd>Language used to …</dd> </dl> – Renders without bullets – Definition is indented 25 26 Hexadecimal Colors HTML Comment • RGB values can also be specified using hexadecimal • Comments are not disppylayed by the browser, but they can color values in the form: help document your HTML. – #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal • With comments you can place notifications and reminders in values between 00 and FF (same as dldecimal 0‐255). your HTML: – For example, #FF0000 is displayed as red, because red is set to its • You can add comments to your HTML source by using the highest value (FF) and the others are set to the lowest value (00). following syntax: <!‐‐ Write your comments here ‐‐> Eg: <!‐‐ This is a comment ‐‐> This is a paragraph. <!‐‐ Remember to add more information here ‐‐> 27 28 Text and Text Formatting Text Formatting… • The Font tag • Text formatting tags modify the text between the opgpening tag and the closing tag – Delimited by and tags – Ex. Hello makes “Hello” bold – tag is used to control font color (RGB bldbold value),font face (such as Times New Roman or italicized underlined Arial) and font size of text within documents. Samplesuperscript Sample – The format of the tag is as follows: subscript strong emphasized color=“font_color”> …text… <pre></pre> Preformatted text <blockquote></blockquote> Quoted text block <del></del> Deleted text – strike through 29 30 HTML <abbr> for Abbreviations Links • The HTML <abbr> element defines an abbreviation • A Uniform Resource Locator (()URL) is the unique address of a or an acronym. resource (usually a document) on the Web. • • Marking abbreviations can give useful information to The URL addressing scheme allows user agents and other ItInterne t‐enable d programs to fin d dtdocuments and ask for the ir browsers, translation systems and search‐engines. content. Ex: • A typical URL has different parts. Faculty of <abbr title=“Allied Health http://www.pdn.ac.lk/symposium_environmental/ th Scie nces “>>S<AHS</abbr> was inaugur ated on 16 July Domain name of the Protocol Location of resource on server machine 2007. Server 31 32 Links… Links… • Absolute path • The anchor tag (()<a>) is used to provide links within – Absolute paths contain all the relevant information to Web documents to other documents or resources on find the resource indicated by the URL. the Internet. EgE.g. • The anchor tag has the fllfollowing format: http://www.pgia.ac.lk/files/short_course/2016/28_03 _2016.pdf <a href=“url_to_resource”>textual_description_of_link</a> • RltiRelative paths ElExample – Relative paths contain information relative to the <a href=“www.pdn.ac.lk" target="_blank">Visit current document. UOP</a> E.g. If the above document has a link to another document, Would be appear as: Visit UOP 33 34 HTML Links ‐ The target Attribute Images • The target attribute specifies where to open the linked • The image tag (<img>) is used to insert images document. into Web documents. Ex:<a href=“www.pdn.ac.lk" target="_blank">Visit UOP</a> • The tag has the following minimal syntax: Target Value Description <img src=“url_to_image” alt=“text_for_non_graphical_agents”> _blank Opens the linked document in a new window or tab • The two parameters src : _self Opens the linked document in the same frame as it was clicked (this is default) define where to find the image (absolute or relative URL) alt: _parent Opens the linked document in the parent frame define text to display if the user agent (browser) cannot display _top Opens the linked document in the full body of the window the image (or is set not to display images at all). framename Opens the linked document in a named frame 35 36 Image Attributes Image Maps • Image size • Use the <map> tag to define an image‐map.

Load more