HTML & CSS - Tentmaker Webdesign

Download Report

Transcript HTML & CSS - Tentmaker Webdesign

Basic Principles for Web Design

Source: http://w3schools.com

What is HTML?

• • • • HTML is a language for describing web pages.

HTML stands for

H

yper

T

ext

M

arkup

L

anguage

HTML is NOT a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages

HTML Tags

• • • • HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and

closing tags

HTML Documents = Web Pages

• • • HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page The content of a website is stored within HTML “tags” (or “elements”).

HTML Example

This Is A Heading

This is a paragraph.

• • • • Explanation: The text between and describes the web page The text between and is the visible page content The text between

and

is displayed as a heading The text between

and

is displayed as a paragraph

HTML Headings & Paragraphs

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
There are 6 heading tags, where the

tag is usually considered the highest and

the lowest.

This is a paragraph

This is another paragraph

Large blocks of text in sentence for is form is usually placed with in a paragraph tag:

HTML Links & Images

Check out this link to Facebook! • • • • • Links are created using the anchor tag: Notice anything different about this tag?

“href” is an attribute of the tag that tells the browser where to navigate to.

The text that is displayed on the website is between the start and end tags (“Check out this…”).

HTML attributes are followed by an equal (=) sign and contain data with quotes (“____”). Some attributes are optional, others are required.

“This • • • • Pictures are displayed using the image tag: Where is the end tag?

What do you think the “src” attribute does?

What do you think the “alt” tag does?

It is also a good idea to include the “width” and “height” attributes for faster loading.

ex: “alternatewidth=“300” height=“450” />

• Width and Height are in pixels.

• Thus, this image will be displayed 300 pixels wide and 400 pixels tall

HTML Lists

  • apples
  • oranges
  • bananas
  1. Item 1
  2. Item 2
  3. Item 3
• • • • • Lists are created using the unordered, ordered, and definition list tags: (
    ,
      , and
      ) Which two types of lists are shown above?

      What do you think an unordered list looks like?

      What do you think an ordered list looks like?

      What do they both have in common?

      What do you think the

    1. tag stands for

      Other helpful tags


      This is bold This is italicized This is emphasized

      • • • • • • Here are some other helpful HTML tags: The
      tag, or “break” tag causes a line break (like hitting “enter” while you type).

      The

      tag, or “horizontal rule” tag creates a horizontal line that can serve as a border between sectionsb The tag, or “boldface” tag formats the text between the start and end tag as bold.

      The tag, or “italics” tag formats the text between the start and end tag as italicized.

      The tag, or “emphasis” tag tears a hole in the space-time continuum, allowing for time travel and warp speed And one of the most important tags is the

      tag, or “division” tag. The
      tag is used to group other elements (tags) together into one block of content.

      What is CSS?

      • • • • • • CSS defines how HTML tags should be display.

      CSS stands for Cascading Style Sheet Can be used to change font type, color, size, etc… Can be used to add background colors or images to elements Can be used to add borders around elements Can be used to arrange the layout of the content Is stored in a separate file that is accessed by the HTML file

      }

      CSS Example

      p{ background-color: blue; text-align: center; font-size:20px; font-family: “Times New Roman, Times, serif; color:#fff; • • • Explanation: The “p” element is styled here according to the entries between the two brackets “{…}” These properties “cascade” down to all

      tags You can choose colors by typing out the name of the color (blue, black, red, etc…) or by using a hexadecimal number value that represents the red, green, and blue mix that creates the color that you want.

      Hexadecimal number order:

      0 1 2 3 4 5 6 7 8 9 A B C D E F

      Colors are represented in a six-digit hex number:

      RRGGBB (Red, Green, Blue)

      For “web-safe” colors, shorten the number to three digits:

      RGB

      #99FF33 (or #9F3 for short)

      These values are always preceded by a pound sign “#”

      Where do you think #00FF00 is on the map?

      }

      CSS with Fonts

      h1{ font-weight: bold font-size: 50px; font-family: “Times New Roman”, Times, serif; color:#009; • • • • • Syntax: What is in each line?

      – Each new line begins with the attribute that we want to define (i.e. font-size) – – – Next is a colon “:” Then, the desired value for that attribute Each line must end with a semi-colon “;” Why are there three different types of fonts under “font-family”?

      What does “color” modify? Why isn’t it called “font-color”?

      What color is #009?

      Do you see what is wrong with the code above?

      }

      CSS Font shortcut

      h1{ font: bold 50px “Times New Roman”, Times, serif; color:#009; • • • • Shortcuts: All of the “font” attributes have been collapsed into one declaration.

      Each attribute is separated from the others with a space.

      Since “color” is not technically a font property, it has to be declared on its own line.

      Some other CSS properties allow for shortcuts as well.

      }

      CSS with Divs

      div{ display: block; width: 600px; height: auto; margin:0 auto 0 auto; color:FFF; • • • • • Styling

      groups: The “display” attribute tells the browser that we want the dive to be treated like a block rather than a line.

      We can give our block fixed dimensions of height and width. Here, we have defined the width as 600 pixels and have allowed the browser to set the height based on the amount of content within the

      Shortcut: The “margin” attribute is a shortcut form of “margin-top”, “margin-right”, “margin-bottom”, “margin-left” in that order.

      What is wrong with the above code?

      CSS with class

      HTML Code:

      This heading will be bright yellow

      This heading will be black

      CSS Code: h1{ color:#000; } } h1.myCustomHeaderClass{ color:#FF0; • • • Styling with classes: In the HTML code we have created a heading (

      ) with a class attribute of “myCustomHeaderClass”, and another with no class attribute The CSS entry for h1 will normally cause all h1 tags to be black. However, because we have created a CSS entry for h1.myCustomHeaderClass, this h1 tag will be bright yello

      Try It!

      HTML

      Heading

      fff

      paragraph

      Click Here

      CSS

      Refresh div{ display:block; width:600px; height:auto; background-color:#000; color:FF0; margin:60px auto 0px auto; padding:30px; } h1{ background-color:#049; border:1px solid #990; text-align:center; } p{ background-color:#000; color:#fff; }

      For More Information:

      http://w3schools.com is an excellent tool for beginners. There you can quickly and easily learn anything from HTML to Flash. Best of all, IT’S FREE!