HTML and CSS Overview of the WWW

HTML and CSS Overview of the WWW • Internet • 1969 - ARPANET • Global interconnected network of computer networks • WWW • NSFNET removes restriction on commercial use of Internet • Tim Berners-Lee at CERN created WWW as a way to hyperlink to documents to view them; used: • HTML (HyperText Markup Language) • HTTP (HyperText Transfer Protocol) • URLs (uniform resource locator) • Mosaic becomes available Overview of the WWW (cont) • Client/Server Model • Describes relationship between two computer programs • Client requests a service • E.g., Web browser requests Web page using HTTP and URL • Server fulfills the request • E.g., Web server sends the Web page file • Client and server usually reside on different computers Overview of the WWW (cont) • URL • Specifies a Web page address • Basic form: how://where/what • how - protocol • where – domain name of the computer • what – local name of file including the path to it (name can be omitted if it is index.html) • Example: http://cs.unh.edu/~sna4/408/index.html | | | | | protocol | folder | file name domain name of Web server sub-folder Overview of the WWW (cont) • Domain names • Locates an organization or other entity on the Internet • DNS (Domain Name System) • Divides the Internet into logical groups • Associates domain names with unique IP address • TLDs – Top-Level Domain Names • Right most part of the domain name • Either generic or country code • Generic examples: .com, .mil, .org, .name, .gov • Country code examples: .au, .de, .in, .jp, .nl, .us, eu Overview of the WWW (cont) • IP addresses • Each device on the Internet is assigned an IP address • IPv4 allowed for at most 4 billion possible IP address • Not enough with proliferation of mobile devices • IPv6 is most recent version of the Internet Protocol • IP address is lengthened from 32 bits to 128 bits (4 bytes to 16 bytes) • 2128 possible unique addresses available HTML • HyperText Markup Language • Started in early 90s, version number increased as language evolved • Simple, text-based mark-up language • Describes meaning of the content • Paragraphs, headings, lists, etc. • Works with CSS (Cascading Style Sheets) HTML (cont.) • CSS (cont.) • Defines how your content and Web page will look • Created in 1996 (after HTML) • Progressive Enhancement • Info on WWW should be accessible to all • Describe content with HTML - accessible to all • Add design with CSS • Viewable with old browsers, mobile devices, screen readers, etc. Web Page Building Blocks Web page consists of three components: 1.Text content 2.References to other files E.g., image files, audio, video, links to other pages, style sheets 3.Markup • HTML elements that describe text content • Does not define how content should appear in browser • Browser has built-in CSS file (aka style sheet) that specifies how each HTML element displays by default Basic HTML Page <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body> </html> Basic HTML • HTML tags do not appear in the browser • Always use HTML5’s DOCTYPE declaration • Code above the <body> is info for browsers and search engines – not visible except for title • Text in title: <title> …</title> appears at top of browser • Default name of browser bookmark • Valuable info for search engine Basic HTML (cont.) • Page’s content goes between <body> … </body> -- this part is visible to users • </html> signals the end of the page • Lines in example are separated with carriage return – this just makes the code easy to read Semantic HTML • Markup describes the meaning of the content, does not define how the content should appear (CSS does that) • Before HTML5 there were block-level and inline elements; now inline = phrasing content • Why semantics matter: • Improved accessibility • Improved SEO • Lighter code and faster pages • Easier code maintenance and styling Markup: Elements, Attributes, and Values • There are 3 principle markup components: • Elements - can contain text or they can be empty and describe the different parts of the Web page: • I am <em>happy</em> to be here! • <img src=“mypic.jpg” width = “110” height = “160” alt = “Picture of Sofia” /> • Attributes contain info about the content in the document <a href = “http://www.amazon.com”>Books</a> href is an attribute of a; http://www.amazon.com is the value for href Some Elements ● <p> … </p> paragraph ● <article> … </article> a distinct piece of content ● <h1> … </h1> heading level 1 (most important) ● … ● <h6> … </h6> heading level 6 (least important) ● <strong> … </strong> important text (usually the same as <b>, bold text) ● <em> … </em> stress emphasis (is usually the same as <i>, italicizing content) ● <a> … </a> link (phrasing content element) Parents and Children • If one element contains another, it is said to be the parent of the enclosed, or child, element: <p>I am <em>happy</em> to be here.</p> • Any elements contained in the child element are considered descendants of the outer, parent element. • Each element must be properly nested • Incorrect: <p>Hello <em>world</p>!</em> Text Content • White space collapses when rendered by browser • It is standard practice to encode pages in UTF-8 • Unicode is a superset of ASCII (American Standard Code for Information Interchange) • The document’s character encoding is specified right after the <head> tag using the charset attribute • Character references are replaced by the corresponding symbol; e.g., © is © File Names • File names are case sensitive • Use .html extension • Suggestions: • No spaces in file names • Use lowercase to avoid confusion • Use – (dash) instead of _ (underscore) URLS • Absolute urls contain all three parts of the url: how://where/what • Relative urls are relative to the currently loaded page on the same server where/what (don’t need where if same directory) Use .. to point to a directory at a higher level of the file hierarchy (Ex: <a href=”../page.html”>) • Use relative when possible to make code portable HTML Tag - Comments  • Provides a way to document your HTML code and make notes to yourself • Comments are not rendered by browser (you need to view the source code to see them) • You can place a comment anywhere in your HTML • Example:  Note: Do not include embedded HTML code in the comment tag as this may produce unpredictable results HTML Tag - Paragraph <p> … </p> • Use the paragraph tag to break text into paragraphs • Enclose block of text with beginning and ending paragraph tags • Examples: <p>This is the title sentence for the first paragraph.</p> <p>This is the start of paragraph two.</p> <p>This is the third paragraph.</p> <p>This is the title sentence for the first paragraph.</p> <p>This is the start of paragraph two.</p> <p>This is the third paragraph.</p> • Note: In the examples, both will be rendered exactly the same by the Web browser but the source code for the second one is easier for us to write and read. HTML Tag – Line Break <br /> • The <br /> tag adds a line break but the browser does not add any vertical space • Notice the built-in ending tag • Example: <p>This is the title sentence <br /> for the first paragraph.</p> HTML Tag - Headings <h1>…</h1> etc. • Use heading tags to designate headings and sub- headings • Most browsers support a hierarchy of six levels of HTML headings where <h1> is the largest and <h6> is the smallest • Browsers will display the headings in bold with various sizes and spacing on separate lines • Example 1: <h6>Copyright Sofia Lemons, 2016. All rights reserved.</h6> • Example 2: <h1>Sofia’s Homepage for CS408</h1> <h1>Spring 2016</h1> HTML Tag - Image <img /> • Used to include in-line images • src (source) attribute is used to specify the URL of the image to be displayed • Either relative or absolute URL can be used to point to image file • 3 most common image file types have .gif, .jpg, or .png extensions • Other attributes are: • alt - an “alternative” text string that describes the image • height and width - the dimensions of the image in pixels • Importance of using the alt, height, and width attributes • Notice built-in end of tag! HTML Tag - <img /> (cont) Example 1: <img src = “IMAGES/mypicture.jpg” alt = “Picture of Me” height = “160” width = “120” /> uses a relative url Example 2: <img src = “http://pubpages.unh.edu/~sna4/408/ GRAPHICS/Fall12/sofia.jpg” alt = “Picture of Sofia” height = “160” width = “120” /> not recommended! Uses absolute url HTML Tag - Anchor <a> … </a> • Anchor tag is used to create hyperlinks • Three basic parts of a hyperlink: • Beginning and ending tag pair <a> … </a> • href (hypertext reference) attribute that specifies the URL of the page to be loaded when the hyperlink is selected • Text or graphic that appears on-screen as the active link Clickable Text Hyperlinks • Text is used as the “hot spot” for the link <a href = “mypage.html”>My Homepage</a> • Example 1: <a href = “mypage.html”>My Homepage</a> This uses a relative URL • Example 2: <a href = “http://www.usa.gov/documents/whitehouse.html”>Wh ite House</a> This uses an absolute URL Clickable Image Hyperlinks • An image is used as “hot spot” for link • Example: <a href = “http://www.usa.gov/wogulis/notready.html”> <img src = “wheelbarrow.gif” alt = “Under Construction” height = “50” width = “50” /></a> Mailto Hyperlinks • Provides a convenient way for someone viewing your Web page to send you e-mail • Example: <a href = “mailto:[email protected]”>Contact Sofia</a> A mail dialog

HTML and CSS Overview of the WWW

Details

Download

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.

Support