HTML, CSS and DOM The basics CIS 388 Internet Programming HTML, CSS and DOM The basics
What is HTML? Hypertext Markup Language (HTML) It is an SGML (Standard Generalized Markup Language) that is used to present “pages” inside of a browser. It’s distinguishing characteristic (other than the syntax) is that is has hypertext links that connect pages/documents together
What is HTML syntax? Syntax is the standardized code that the language is composed of. HTLM is a “mark-up” language, meaning that the code and the data in the page are mixed together and the HTML code will have a tag before (opening) and after (closing) the data to determine how the data is to be presented. *Nested tags/overlapping tags Originally HTML set-up the structure of the page as well and how the data is to be presented, today it is mostly used for structure.
What is HTML Code & How does it Work? Sample HTML code: <strong>Bold Data</strong> For complete reference on HTML go to w3schools: http://www.w3schools.com/html/ There are only a few HTML tags that do not have “closing tags” - <br /><img /><hr /> etc… Complete list here: http://xahlee.info/js/html5_non-closing_tag.html
Examples of HTML tags and what they do/mean… Complete reference: http://www.w3schools.com/tags/ Strong or b – Bold Em or I – Italicize H1 – heading 1 P – paragraph Ol – ordered list Ul – unordered list Li – list item A – anchor/link tag
Some tags have attributes/properties…. Tags like the <a> tag have properties, in the case of the anchor/link tag it has an “href” property for the file/location that it links to. Other tags, like font, have properties like size and color, etc… Comments! <!-- HTML comments are contained inside of exclamation tags like this one -->
How do I create an HTML file? You will need… notepad or some code editing program to create the page. HTML page requirements: Document must be an “htm” or “html” file type Opening and closing “html” tags at the beginning/end of the document Opening/closing “head” and “body” tags *Page title tag, doctype tag (optional) http://www.w3schools.com/html/html5_intro.asp
Sample HTML Page – Hello World! <html> <head> <title>First HTML Page</title> </head> <body> <p>Hello World!</p> </body> </html>
What is CSS? CSS stands for Cascading Style Sheets CSS is an “addition” to HTML that allows us to separate the structure of the page (layout) from the presentation of the data in the page. It also allows us to create classes and ids of styles that we would like to apply to a page without having to retype the HTML code CSS Reference: http://www.w3schools.com/cssref/
How does CSS Work? CSS is basically an addition to HTML, you can call a separate CSS file in the head section of your html page Ex: <link rel="stylesheet" href="styles.css"> You can add style tags to the head of your page to apply stlyes to that page only You can add a style “in-line” with an HTML tag to modify the style of anything contained within that tag
3 levels of CSS? CSS is “organized” into 3 basic “levels” External Head In-Line The “last” CSS property for a tag, class, or ID will take precedent over all other references to it, the external CSS is loaded first (multiple CSS files can be loaded – *conditional CSS), then the Head CSS styles are applied and finally the In-line styles.
What is CSS Syntax/code CSS Syntax/code has properties/attributes and is simple to read and understand like HTML, but there are no opening/closing tags. The code is a little different depending on where the CSS is applied, in-line CSS is simple added to the HTML tag with a “style” property/attribute Ex: <strong style=“color: #FC0;”>Bold Text</strong> Multiple properties/attributes of a tag/id/class can be altered by a CSS style as long as they are separated by a semicolon (;) *Also an HTML tag can have multiple classes
What is CSS Syntax/code (cont.) CSS Code in the Head for the document is contained within <style></style> tags Ex. <style> strong {color: fco;} </style> CSS Code in external style sheets is identical to CSS code in the head of the document, but no beginning/ending “<style></style>” tags are necessary. CSS Comments! External style sheets usually contain a TON of comments for each section of the page and the author/revision of the CSS file. Ex. /* This is a CSS Comment */ CSS classes are referenced with a period Ex. p.name {css code} CSS ids are referenced with a “pound sign” Ex. #myname {css code} Reference: http://www.w3schools.com/html/html_css.asp
What is the DOM? The DOM is the Document Object Model is also an addition to HTML that allows id to reference objects (classes/ids) and preform actions within the page (javascript) Reference: http://www.w3schools.com/jsref/dom_obj_document.asp Introduced along with DOM was the <div> element in HTML and is used to create structural elements of the page *Elements referenced within CSS can have parent/child relationships within the document that they can be referenced, they can also have multiple “states” like a link can be active,hover,focus, or visited (http://www.w3schools.com/css/css_link.asp)
Assignment/Review Create an HTML page and add some CSS to it.