overview of html and css
DESCRIPTION
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.) - PowerPoint PPT PresentationTRANSCRIPT
Overview of HTML and CSS
Terminology, Function, and Conventions
HTML• HyperText Markup Language
o The language used to markup content so that it is viewable in a web browser.
o NOT a programming language (such as Java, Perl, PHP, Ruby, etc.)
o Consists of elements enclosed in tags that are used to assign properties to content that tell that content what to look like on the screen
o 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)o Closing elementso Lower caseo 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.o And it’s no longer being developed as a separate standard
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 beo Increased coding possibilities for mobile deviceso Increased multimedia commands as web pages grow more reliant on
embedding many different types of mediao 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: a popular video file type on the web.
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.
TagsOpening 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 character 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.
Nitpicky Terminology<p>Is a tag with the character name p (for paragraph)
<p> </p>With the opening and closing included, the entire thing is technically an element
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- the “a” is for anchor
• <ul>: defines a bullet list—the “ul” is for unordered list
• <li>: defines a line in a bulleted list- the “li” is for list item
• <p>: defines a paragraph
• <img>: defines an image
• <div>: defines a page division or section
The Page Structure Tags
<html><head>
<title> </title>
</head><body>
</body></html>
<html>: merely defines the page as html code
<head>: where important meta information is placed
<title>: titles the page (displayed in browser tab)
<body>: everything visible on the screen
Tags are Pre-Defined• You can’t make up tag names. There are
approximately 120 pre-defined tags in the HTML toolbox.o Though for our purposes, I’d suggest we’ll never use more than 20-30
of them at most
• Think of them as words in a language. You *could* make up new ones, but nobody is going to understand you.
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!
Parent/Child TagsWhen tags open and close while inside a tag that opens and closes around them, they have a parent/child relationship.
<p>This is a paragraph where <b>this part is bolded, and <i>this part is bolded and italicized</i></b>.</p>
On Screen:This is a paragraph where this part is bolded, and this part is bolded and italicized.
<p> is the parent tag<b> and <i> are children tags to the <p>
Nested Tag Closing Rule
Child tags will always close in the reverse order that they opened.
<p>This is a paragraph where <b>this part is bolded, and <i>this part is bolded and italicized</b></i>.</p>
<p>This is a paragraph where <b>this part is bolded, and <i>this part is bolded and italicized</i></b>.</p>
<p> is the parent tag<b> and <i> are children tagsOrder of opening: <b>, <i>Order of closing: </i>, </b>
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
Attributes• Attributes give more info about an element• They require an element to attach to, an
attribute name, and an attribute value
<img src=“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
Stacking Multiple Attributes
<img src=“picture.jpg” alt=“descrip of picture” />
Note the format of attribute name, equal sign, opening quotation, attribute info, closing quotation
<a href=“http://markdpepper.com” target=“_blank”>Pep’s Site</a>
Attributes• Certain attributes are only ever used with specific
elements
<a href=“http://markdpepper.com”>
The attribute href is only ever used with an <a> <p href=“something”> would never happen
<img src=“picture.jpg” />
The attribute src is mainly only used with an <img>
Looking Ahead• The Class attribute
o <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.
• The values of the class “stylized” will be defined on the CSS sheet.
Thus, the class attribute is one that can go with virtually any element
Old Skool• <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>
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.
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 upCSS: style page that tells mark ups how to behave
Benefits of CSS• Cleaner and easier to read code
o 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 layoutso 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)o 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
o 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.
<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, serif;font-size: 12px;color: black; }h2 {font-family: arial, sans-serif;color: red;font-size: 14px; }
HelloThis 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.
HTML CSS ON WEB
Quick Intro to Layout
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
o Positioning commands like float and margino Precise sizing through width and heighto Precise amounts of space between edge and internal
content through paddingo Borders on any or all sideso Aesthetics through background-color or background-
image
Simple HTML 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
Left column content
Right 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
Left column content
Right 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.
Nested Closing Again<div id=“leftcolumn”><p><b><a href=“http://markdpepper.com”>Link</a></b></p></div>
<div> is a parent to everything<p> is a parent to the <b> and the <a>Opening order of children: <b>, <a>Closing order of children: </a>, </b>
On screen, the bolded link:Link
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
Your First Rules to Live By
• In your text editoro Elements and attributes are all written in lower
caseo Use only single spaceso Learn where spaces are neededo Caps are OK in-between <p> tags- this is the
paragraph text that appears on the pageo Remember that one piece of missed
punctuation can ruin everything• <img src=“picture.jpg” alt=“description” />
Quick Quiz1. An HTML charater, like p, is called what once it’s
enclosed between < > signs?2. When I write </p> versus <p>, what am I doing?3. Why is there no such thing as </img>?4. <a href=“http://markdpepper.com”>Link</a>
1. What is the href part of the above code referred to as?5. What does CSS stand for and what does that
page do?6. Is this right or wrong?
1. <p><b>Some bolded text and some <i>some bolded and italicized text</b></i></p>
7. What’s wrong with this file name?1. My Class Test* Page.html