Lesson 3 : HTML & CSS

Unit 1: HTML & CSS 

Lesson 3: HTML & CSS
Common Core Standards:RST.11-12.3
1-2 Day Lesson

Aim: What HTML and CSS in the Web Design  ?

Students will be able to:
  • Understand the how html and css is used industry.
  • Practice using HTML & CSS.
Mini Lesson: 

Lesson Question

  1. What is HTML?
  2. What is CSS ?
  3. What are the two core technologies for building web pages?
  4. What does HTMl provide for a web page?
  5. What are some other things that goes along with HTML & CSS in the creation of web pages?
  6. What HTML online publish documents have on a page?
  7. How do HTML retrieve online information?
  8. What types forms do HTML allow you to create for web pages?
  9. What is CSS?
  10. What is CSS use for in web pages ?
  11. Why the separation of HTML and CSS make the makes sites easier to maintain?

HTML

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications. Learn more below about:

What is HTML?

HTML is the language for describing the structure of Web pages. HTML gives authors the means to:

  • Publish online documents with headings, text, tables, lists, photos, etc.
  • Retrieve online information via hypertext links, at the click of a button.
  • Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
  • Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.

What is XHTML?

XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).

What is CSS?

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple Web pages all at once. External Style Sheets are stored in CSS files

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.

Simple HTML & CSS Page Activity

This will “tile” the image of stone.gif across the background of a web page, provided the image is in the current web directory. Since the image is displayed in a “tiled” format, the creation of repetitive background images are commonly used to minimize web page loading and downloading time.

To create a web page document, follow these 6 simple steps:

  1. Open a text editor such as Notepad on a Windows based machine.
  2. Copy and paste the following code depicting the document structure tags:
            <html>
            <head><title></title>
            </head>
            <body>
    
            </body>
            </html>
  3. Alter the <body> attributes to create a custom visual appearance for the web page.
  4. Add all other necessary HTML elements to provide content. (see later sections)
  5. Save the text file with a .html or .htm extension in the same directory as all other related web page files.
  6. Open the HTML file in a web browser.

For a web page example, follow the above steps and insert the following HTML code in place of the document structure tags. Note: See later sections for tags not covered in this section:

        <html>
        <head><title>Our First Web Page - HTML is simple!</title>
        </head>
        <body bgcolor="#FFFFFF" text="#FF0000">

        <h2>Hello, world. HTML is easy!</h2>

        </body>
        </html>

By now, you should have already created your first web page document. I told you it wasn’t difficult. The next section introduces you to several “tags” you need to know to give your web page a professional, clean look. Read on for more about tags…

College Major Questionnaire HTML & CSS

Create two HTML pages that address the following questions for your pair team:

  1. What is your name?
  2. What major do you want take in college ?
  3. Why do I want this major?
  4. Do I know enough about this major?
  5. What are the requirements for this major?
  6. Is my college strong in this major?
  7. What are the career opportunities for this major?
  8. Is this the right–and only–major for my career path?
  9. Have I talked to someone in this major?
  10. Am I good at this major?
  11. Do I want to pick a traditional major at all?
  12. Is it the right time to declare a major?
Summary: Discussion…..

What HTML and CSS in the Web Design  ?

 

Homework: 
Write a summary of todays lesson and activity in your google classroom journal.

Resources:

 

http://www.codeproject.com/Articles/3519/HTML-Made-Simple

Advertisements