Overview of HTML and CSS

Overview of HTML and CSS Terminology, Function, and Conventions

HTML • HyperText Markup Language • The language used to markup content so that it is viewable in a web browser. • NOT a programming language (such as Java, Perl, PHP, Ruby, etc.) • Consists of elements that are used to assign properties to content that tell that content what to look like on the screen • Can be seen by selecting View > Source in any browser (Ctrl + U in Firefox) • Developed originally by Tim Berners-Lee and Robert Cailliau in the early 90s primarily as a way for members of the Eurpoean Organization for Nuclear Research to share and use documents.

HTML versus XHTML • In essence, they are very similar. XHTML is slightly more strict in its syntax rules (the way the code should be written) • Closing elements • Lower case • etc. • For our purposes, they are not all that different. XHTML is a reformulation of HTML that attempts to get programmers to write more standardized and elegant code across the web.

HTML5 • HTML has gone through many versions that have all added new functionality. The current version is HTML 4.01. • HTML5 has been in the works for quite some time now. Some key differences when it’s done will be • Increased coding possibilities for mobile devices • Increased multimedia commands as web pages grow more reliant on embedding many different types of media • New tags for structuring content beyond a <div>

Why All this Concern About Standards? • Like the English language, we can say things in different ways and still be understood. Yet different people will understand us differently based on who they are. • Likewise, different browsers will read code differently. Some will allow certain types of markup that others won’t. • The more standardized the coding language, the more chance for web pages to look the same cross-browser (but we’re not there yet).

File Extension • A file extension is what comes after the . in a file name. For example, myhomework.docx has a file extension of .docx which is the document file type for recent versions of Microsoft Word. • It is important to save documents (or find documents) with the proper extension to make them behave the way you want to- especially in web design.

Common Extensions • .html: this is the file extension for a web page itself. Every page on the web is technically a file with the .html extension • .css: extension for a style sheet. This page (usually one per site though this can vary) tells the .html pages what to look like • .jpeg: image extension for the most popular type of file used for large images on web • .gif/.png: also image types but often used for smaller images like icons or buttons • .flv: most popular video file type on the web. Every video on Youtube is in .flv format

Some Code • Code can be an unintelligible mess. • Amazon • Code can be elegant and simple • Course Site • This can be a result of the complexity of what the page has to do (in which case it’s fine), but it can also be a result of poor coding skills and unneeded markup added by certain Web Design Software

Tags • Tags are the key to marking up content.. • Tags consist of a less than sign (< )and a more than sign (>). The term in-between is the specific HTML element. • Most tags have to open and close. The closing tag includes a </> before the element title.

Tags Opening Tag: <body> Closing Tag: </body> Opening Tag: <p> Closing Tag: </p> Everything inside the opening and closing tag will be defined (and behave) according to the element name. Since body defines what is visible on the whole page, the opening tag will be near the top of the page and the closing near the very bottom. There can be only one body tag. <p> is the paragraph tag; therefore, it will be used often throughout a document whenever you need a paragraph. Think of these as the front and back cover of a book. You need both to hold it together and everything between the front and back cover is the content of the book itself.

Common Tags • <body>: defines everything visible on the page • <h1>, <h2>, <h3>: defines level headers. H1 is usually the largest text on the page (like a title), and each subsequent number is slightly smaller text • <a>: defines a hyperlink • <li>: defines a line in a bulleted list • <p>: defines a paragraph • <img>: defines an image • <div>: defines a page division or section

Self-Closing Tags • Some tags “self-close,” meaning you don’t need the closing tag • You will remember which ones are like this with experience and practice • <img /> there is no </img> • <br/> used to create a link break

Pages as a Series of Tags • <html> • <head> • <title>My Page</title> • </head> • <body> • <b>Hello!</b> • <p>This is my page!</p> • <p>Isn’t it cool?</p> • <center>Dig it!</center> • </body> • </html> My Page (will display in browser tab and search engine results) Hello! This is my page! Isn’t it cool? Dig it!

Forgetting to Close a Tag • <html> • <head> • <title>My Page</title> • </head> • <body> • <b>Hello! • <p>This is my page!</p> • <p>Isn’t it cool?</p> • <center>Dig it!</center> • </body> • </html> My Page (will display in browser tab and search engine results) Hello! This is my page! Isn’t it cool? Dig it!

Attributes • Attributes give more info about an element • They require an element to attach to, an attribute name, and an attribute value <imgsrc=“picture.jpg” /> Img is the element for image and src is the attribute name for source that grabs the value of the pic named picture .jpg

Looking Ahead • Multiple attributes on one element • <imgsrc=“picture.jpg” alt=“image of a man smoking a pipe” /> • Styling attributes • <p class=“stylized”> Content </p> • All <p> tags will look the same way, but sometimes you want a certain paragraph to look different. Assigning it a class with different visual values accomplishes this.

Old Skool But this is pre-CSS web design. Note how the content (hello, this is my page, isn’t it cool, dig it) is mixed in with tags that tell the content what to look like: the <b> makes the “hello” bold and tags that tell the content where to position itself The <center> tells the “dig it” to center itself in the browser window. We don’t do this anymore. • <html> • <head> • <title>My Page</title> • </head> • <body> • <b>Hello!</b> • <p>This is my page!</p> • <p>Isn’t it cool?</p> • <center>Dig it!</center> • </body> • </html>

CSS • Cascading Style Sheet: a page that tells the various markup elements how they should look and where they should be positioned • Can technically be embedded at the top of a web page’s code but it is preferred to make them a separate page that is internally linked to from the html HTML: content pages with mark up CSS: style page that tells mark ups how to behave

Benefits of CSS • Cleaner and easier to read code • With the aesthetics and positioning placed on the separate CSS page, the actual HTML content is far easier to sift through • More options for positioning and complex layouts • Pre-CSS, many websites were built with tables. These didn’t allow designers pin-point placement, didn’t always print well, and were hard for search engines to process • A Table Site (they’re still around) • Reveal the code and see the <tr> and <td> tags: a sure sign of a table site (if the ghastly grids wasn’t enough to prove it) • Site Wide Changes in an Instant • If you define the font and color of a title each time on a page, then you have to change them all individually when you change your mind. A CSS page lets you make one change and that change instantly proliferates across the whole site.

HTML CSS ON WEB <h1>Hello</h1> <p>This text will have the font, size, and any other properties that are assigned to the p tag on the CSS page.</p> <h2>I hope you can see </h2> <p>that this is an important benefit of CSS.</p> h1 { font-family: arial; color: red; font-size: 16 px; } p { font-family: times new roman; font-size: 12px; color: black; } h2 { font-family: arial; color: red; font-size: 14px; } Hello This text will have the font, size, and any other properties that are assigned to the p tag on the CSS page. I hope you can see That this is an important benefit of CSS.

Quick Intro to Layout As mentioned before, pre-CSS design layout worked mainly with tables like the one above. You could only insert content into the individual cells. There was little ability to place elements where you wanted them and sites almost always looked like the boring grids they were built upon.

Div Tags • Now most designers use DIV tags. These are areas of page division that can be moved around with precise pixel accuracy. Think of them as division boxes with precise functionality. The CSS can assign many features to them for more dynamic layouts • Positioning commands like float and margin • Precise sizing through width and height • Precise amounts of space between edge and internal content through padding • Borders on any or all sides • Aesthetics through background-color or background-image

Naming Divs • Unlike the tags we’ve discussed so far, DIVS can technically have any name you give them. Though some naming conventions have become standard. Opening tag: <div id=“wrapper”> (wrapper could be anything. But “wrapper” is a popular name given to a containing box that holds all elements of the site. Closing tag: </div> (note the name is not repeated in the closing tag of the division)

Simple Layout <div id=“banner”> Banner content </div> <div id=“navigation”> Navigation bar content </div> <div id=“leftcolumn”> Left column content </div> <div id=“right column”> Right column content </div> <div id=“footer”> Footer content </div> Banner content Navigation bar content Right column content Left column content Footer content Note the sizes, colors, and other properties of these divisions are defined on the CSS page

The CSS #banner { width: 800px; height: 200; } #navigation { width: 800px height: 50px; } #leftcolumn { width: 400px; height: auto; float: left; } Banner content Navigation bar content Right column content Left column content Footer content Getting ahead of ourselves, but the height of “auto” allows the column to scroll down as far as it needs to. The float positions the column to the left so we can place the right one next to it.

Your First Rules to Live By • When first creating and naming .html or .css files, do not use any caps, do not use any spaces, and do not use any special characters. Keep them simple. • index.html • courses.html • autobiography.html • stylesheet.css • stylerules.css

Overview of HTML and CSS