VJC Chapter 7 HTML and CSS

Chapter 7: HTML and CSS Contents 1 HTML Document 2 Adding elements 3 HTML form 4 CSS 4.1 Inline CSS 4.2 Internal CSS 4.3 External CSS 4.3.1 Using element selector 4.3.2 Using id Selector 4.3.3 Using class Selector Syllabus Learning Outcomes 4.2 Web Applications Understand the concepts and techniques for developing web applications. 4.2.3 Use HTML, CSS (for clients) and Python (for the server) to create a web application that is able to: – accept user input (text and image file uploads) – process the input on the local server – store and retrieve data using an SQL database – display the output (as formatted text/images/table).

1 HTML Document Every Hypertext Markup Language (HTML) document you create or load is derived from this basic template: This template can be broken down into 4 parts: DOCTYPE : An HTML document will usually start with a type declaration (which is not a tag, so it should not have a closing tag). The declaration helps the browser determine what type of HTML document it’s trying to parse and display. Browsers look for this doctype declaration to determine which rendering mode to use to render the site <html> : Represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element. <head> : Describes meta information about the site, such as the title, and provides links to scripts and stylesheets the site needs to render and behave correctly. For instance, the <head> is responsible for: ● the document’s title (the text that shows up in browser tabs): o <title>About Me</title>. ● associated CSS files (for style): o <link rel="stylesheet" type="text/css" href="style.css">. ● associated JavaScript files (multipurpose scripts to change rendering and behavior): o <script src="animations.js"></script>. ● the charset being used (the text's encoding): o <meta charset="utf-8">. ● keywords, authors, and descriptions: o <meta name="description" content="This is what my website is all about!">. ● … and more!

At this point, just focus on these two tags: ● <title>About Me</title> ● <meta charset="utf-8"> <meta charset="utf-8"> is pretty standard, and will allow your website to display any Unicode character. <title> will define the title of the document and will be displayed in the tab of the browser window when a user visits the page. <body> : Describes the actual content of the site that users will see (always visible). Basic HTML tree structure: Here’s an example tree structure for a full HTML document:

2 Adding elements Note: no closing tag needed

3 HTML form Other than links, one other way users interact with webpages are through HTML forms. Creating forms are straightforward. The <form> tag is used. The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. An <input> tag take in user input in many ways. It doesn’t need a closing tag. Type Description <input type="text"> Displays a single-line text input field <input type="radio"> Displays a radio button (for selecting one of many choices) <input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices) <input type="submit"> Displays a submit button (for submitting the form) <select> <option></option> </select> Creates a drop down list The <label> tags usually hang out near <input> tags, to match them with descriptions. The for attribute identifies the label as belonging to that input, i.e. clicking on the text within the <label> element toggles the input. The name attribute is needed to reference the form data after the form is submitted. The id attribute specifies a unique id for an HTML element. The id attribute is used to point to a specific style declaration in a style sheet (CSS). The value attribute specifies the value of an <input> element. The value attribute is used differently for different input types: ● For "button", "reset", and "submit" - it defines the text on the button. ● For "text", "password", and "hidden" - it defines the initial (default) value of the input field. ● For "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit) The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value.

Input type HTML Syntax Text Radio Alternative: <label><input type="radio" name="fav_fruit" value="Apple">Apple</label> Checkbox File Drop down list Button

Submit 4 CSS CSS stands for “Cascading Style Sheet” and is used in conjunction with HTML as a powerful tool for creating web design and layout.. With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more! CSS can be added to HTML documents in 3 ways: ● Inline - by using the style attribute inside HTML elements ● Internal - by using a <style> element in the <head> section ● External - by using a <link> element to link to an external CSS file 4.1 Inline CSS An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element. The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red: 4.2 Internal CSS An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element. The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with an "aquamarine" background color:

4.3 External CSS An external style sheet is used to define the style for many HTML pages. For our syllabus, we will focus on using external CSS. To use an external style sheet, add a link to it in the <head> section of each HTML page: HTML CSS Brower The external style sheet has to be saved in the same folder. If the style sheet is saved in a different folder, e.g. stylesheets, the path has to be written using a forward slash: 4.3.1 Using element selector The element selector selects HTML elements based on the element name. General Applied Outcome h1 elements