How the Web Works?

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> <p>This is some text...</p> • 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> <p>This is some tttext...< /p> </head> </body> <body> </html> <p>This is some text...</p> 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> <p>This is some text...</p> Ex: </body> <body bgcolor=“yellow”> </html> </body> HTML body 13 14 Paragraphs Align paragraph • Paragraph Tags • <p> tag has align attribute – Delimited by <p> and </p> tags • Align can be right, left, center, justify – Paragraphs in HTML act much like the paragraphs – ex>: in a word processor. <p align=“justify”> – HTML automatically adds an extra blank line before and after a paragraph </p> <p>This is my first paragraph</p> <p>This is my second paragraph</p> 15 16 Headings Manual Break • Standard HTML tags allow six levels of • Uses the line break tag <br> or <br /> 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 ‐‐> <p>This is a paragraph.</p> <!‐‐ 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 <font> and </font> tags – Ex. <b>Hello</b> makes “Hello” bold – <font> tag is used to control font color (RGB <b></b> bldbold value),font face (such as Times New Roman or <i></i> italicized <u></u> underlined Arial) and font size of text within documents. <sup></sup> Samplesuperscript Sample – The format of the <font> tag is as follows: <sub></sub> subscript <strong></strong> strong <font face=“font_name ” size=“relative_ size” <em></em> emphasized color=“font_color”> …text…</font> <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. <p>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.</p> 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.

View Full Text

Details

  • File Type
    pdf
  • Upload Time
    -
  • Content Languages
    English
  • Upload User
    Anonymous/Not logged-in
  • File Pages
    19 Page
  • File Size
    -

Download

Channel Download Status
Express Download Enable

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

  • Not to be reproduced or distributed without explicit permission.
  • Not used for commercial purposes outside of approved use cases.
  • Not used to infringe on the rights of the original creators.
  • If you believe any content infringes your copyright, please contact us immediately.

Support

For help with questions, suggestions, or problems, please contact us