Web Architecture & HTML BIS1523 – Lecture 1
Web Architecture Server: Stores the web pages Client: Your computer, running some sort of web browser Browser: Responsible for drawing/showing the pages Web pages are files that are stored on a server, and retrieved by users using a web browser. Other systems, such as databases, application servers, or remote file systems are sometimes used.
Universal Resource Locator URL: Each file on the Internet has a unique URL, the web address, that describes a file’s location and what a browser should do with it. A URL has a scheme, a host, and a path: Scheme: Tells the browser how to deal with the file. The scheme is followed by a colon and two forward slashes. HTTP: The most common scheme; used to access webpages. HTTPS: Used for secure webpages, such as e-commerce sites. Host (host name): Where the file is located. Path: Includes directory names that lead to a file and the file name itself, all of which are optional.
Component Files Web pages are made up of several different kinds of files, that often are linked together in some manner. HTML Files: The ‘core’ of the web page, HTML files contain information including the content of the web page, as well as how the pieces of that content fit together. CSS Files: These files contain information on how the web page should be displayed. Including page layout, font and color choices, and a number of other options. Image Files: Graphical images are stored in separate files, and transferred as needed. Programs: Programs can be included in web pages, in the form of Java-Script and similar programming languages.
HTML Files HTML files are the primary files that contain information about the web page. An acronym for “Hyper Text Markup Language”, HTML files contain several key pieces of information: Text content: The bare text that appears on the page. References to other files: Loads images, video, and audio files, as well as CSS style sheets to control page’s appearance, and JavaScript files that add special behavior to your page. Also links to other HTML pages and assets. Markup: The HTML elements that describe your text content and make the references work. These are often referred to as “tags”. All three components are text-based, saved in text-only format Page also includes HTML information about the page itself for browsers and search engines.
HTML Tags HTML tags are enclosed within the < and > characters. Tags are used to describe sections of content. For example, the “paragraph” tag marks a particular section as a paragraph of related material. While the “navigation” tag might mark a section of content as a “list of links to other web pages”. Most tags have a starting, and ending form, to mark the beginning and end of each section of content. For example: <head> would mark the beginning of the ‘header’ for the web page </head> would mark the end of that section. Ending tags use the same form as start tags, but with an additional slash (/) character preceding them
Example “Hello World” HTML
Example: Tags Highlighted Starting and Ending tags are highlighted above. All of the non-highlighted text is ‘content’. That is the actual information that will be displayed by the clients browser.
Basic HTML Structure Foundations of a page: Every webpage begins with the DOCTYPE declaration. It also includes the html, head, and body elements. You can use this basic document as the starting point for your web pages, a ‘blank sheet of paper’.
Top and Header Information Everything above the <body> start tag is instructional information for browsers and search engines: <!DOCTYPE html> tells browsers that it is an HTML5 page. Always make it the first line. html element encloses the rest of the page between <html lang="en"> and the </html> end tag. lang="en” indicates English is the page’s default language. Document head is the area between <head> and </head>. Title is the text between <title> and </title>. Only part above the body visible to users, displaying on the browser tab, at the very top of the browser window, and typically as the default name of a browser bookmark.
Body Section Markup surrounding text content doesn’t appear when you view the page in a browser. HTML element tags are essential because they describe your content. Six of the most common HTML element tags: a, article, em, h1, img, and p. Each has its own meaning; for instance, h1 is a heading, a is a link, and p is a paragraph.
Indentation and White Space The code’s indentation has absolutely no bearing on how the content displays in the browser. The pre element is the one exception. When viewing the page in a browser, the extra returns and spaces are ignored However, it’s customary to indent some elements when they are contained in another element. You want to format your HTML files with horizontal and vertical spacing to make them easier to read by yourself, and anyone else who may need to edit the page later. Example: The long paragraph in the hello world example when viewed in notepad has line breaks in it for formatting. When viewed in a web browser, it is one continuous paragraph.
Attributes and Values Attributes contain additional information about an element. Attributes are located inside an element’s start tag. Type attribute names in lowercase and enclose attribute’s value in quotation marks. Some attributes only accept specific values. One example we have seen so far is the “lang” attribute. It can be set to one of many pre-defined values Attributes and values appear inside the < > characters, after the name of the element.
Attributes and Values Value types can be one of several different kinds: Predefined (or enumerated) values: You must select a value from a standard list of choices. Be sure to write enumerated values in all lowercase letters. Numeric value: A few attributes require a number value, particularly those describing size and length. Numeric value never includes a unit type, just the number. In video or image size, values are understood as pixels. URL values: Some attributes reference other files and must contain values in the form of a URL. Boolean attribute: A special kind of attribute with optional value. If present, it evaluates to true. If you include a value, set it to the name of the attribute itself. Boolean attributes are predefined.
Tags within Tags You will notice in our example that the <title> section appears entirely within the “head” section. Thus, the <head> section completely contains the <title> Several terms are used to describe this relationship between two or more sections of an HTML document.
The HTML family tree Family tree structure is a key feature of HTML code: When one element contains another, it is considered the parent element. The enclosed element is considered the child element. Any elements contained in the child element are considered descendants of the outer, parent element or ancestor. When elements contain other elements, each element must be properly nested—fully contained within its parent. When using an end tag, it should correspond to the previous unclosed start tag. This structure facilitates both styling elements with CSS and applying JavaScript behavior.
Parent/Child Example In the above example, <h2> is a child of <article>, and a descendant of <body>. You could also say <article> is the parent of <h2>, and is also an ancestor of <p>
Incorrectly Contained Elements If an element encloses another element, it must fully enclose it. The example above is incorrect because the <body> tag is closed before the <paragraph> tag that is contained within it.
Classic Web Design The web has been around for a number of years, and HTML has evolved to adapt to the most common ways that people write pages. A particular format has developed to be very common with modern pages, with an example to the right. These ‘groupings’ of objects were so common, the newest version of HTML uses tags specifically named for these types of groupings. Not all web pages will have all of the groupings shown in the example to the right, or necessarily in the exact positions.
HTML Semantic Tags Tag Description header The top-most, or “heading” area of a document or section. footer The bottom-most part of a document, or section. nav Used for a group of navigation links. article Used for independent, self-contained content. The primary content for a web page. aside Used for loosely related, but separate content from the content it is placed in. Can be used for advertisements separate from the main content. div Defines a generic section of content section span Defines generic section of content, around a word or phrase only Semantic tags are used to group sections of a web page based on their purpose
Example Page Here is an example web page, can you deduce which areas are grouped using which tags? Header Nav Article Asides
Example Page Header Nav Section (search) nav Article Aside (ads) Some groupings may appear more than once. Pages may have several groups of “nav” tags, articles, etc.
Example Page This example has many articles Nav Header nav Articles Asides This example has many articles
Positioning Normal positioning in HTML files is a single vertical column. Positioning groups of content into multiple columns, or in more elaborate formations is handled by setting values on attributes, and using CSS to format their location. This is covered in a future lecture Header Nav Article