HTML & CSS


WHAT IS HTML


  • HyperText Markup Language
  •  is the language used to write web pages, which can then be displayed using a web browser program. 
  • html tags

Markup Languages vs. Programming Languages

  •  set of instructions about a document which tell the computer how to display that document

W3C

  • World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web
  • education
  • develops software
  • open forum for discussion about the Web

Structure


   Html tags

  •  are instructions which tell a web browser how to display a document. 
  • enclosed within < and > symbols 

 <HTML>
 Html content here

</HTML>
  • contain one or more attributes that can give extra information
  <P ALIGN=”center”>
 

Example

<html>
  <head>
    <title>Sample "Hello, World" Application</title>
  </head>
  <body bgcolor=white>

    <table border="0" cellpadding="10">
      <tr>
        <td>
          <img src="images/CFL.png">
        </td>
        <td>
          <h1>Sample "Hello, World" Application</h1>
        </td>
      </tr>
    </table>

    <p>This is the home page</p>
 
    <ul>
      <li>To a <a href="test.com">Page one</a>
      <li>To a <a href="test.com">Page two</a>
    </ul>

  </body>
</html>

DOM

  • tree-structure
  • navigate through and modify an entire page


The id attribute

  • unique id for an HTML element
  • used to point to a style in a style sheet
  • used by Javascript to manipulate the element with the specific id.

Structure

      1. The Head Section
  • informations about the document
  • placed at the top of the html document
 <TITLE> Page title</TITLE> 
 <META NAME="Description" CONTENT="Type a description of your site here.">
      2. The Body Section 
 
  • content of your page

Tags

  • Paragraphs & line breaks

 <P> </P>
 <DIV> </DIV>
 <BR>
  • Input
 First name: <input type="text" name="fname">
 Example:    

TAGS

  • Buttons

 <button type="button">Click Me!</button>
  • Headings
  <H1>Level 1 heading</H1>
  • Lists  
<UL>
 <LI> Item 1 
 <LI> Item 2 
 <LI> Item 3 
</UL> 
 <OL TYPE=A>
 <LI> Item 1 
 <LI> Item 2 
 <LI> Item 3 
</OL>
 

CSS

                                              Cascading stylesheets
  •  HTML was never originally designed to look good
  •  separate the document content (written in HTML or a similar markup language) from document presentation
  • W3C


Structure of styles

  •  rules, declarations and selectors. 
 H1 {color: red}
This rule tells the web browser that level 1 headings should have a red font color. 


CSS SELECTOrs

  • used to declare which part of the markup a style applies to, a kind of match expression.

  • may apply to:

      1. all elements of a specific type, e.g. the second level headers h2
      2. to elements specified by attribute, in particular: id and class
      3. to elements depending on how they are placed relative to others in the document tree.

Css selectors

  • .className
  • #elementId
  • element
  • element element
  • :hover
  • :first-child 

#button .active { color: red}
.elementClass p {color:blue}


CSS Inheritance

  • Child -> Parent inheritance
  • but not all css properties are inherited !!!
<html><body>   <div id = "DivOne">       <p> This text will be red. </p>   </div></body></html>

#DivOne {  color:red}

Defining Styles

  • Linked stylesheets
 <LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">
  • Embedded stylesheets
 <STYLE TYPE="text/css"><!--
...style code goes here...
-->
</STYLE>
  • Imported Stylesheets 
 
<STYLE TYPE="text/css">@import url(style.css);
... rest of style code goes here
</STYLE>
  • Inline Styles

 <P STYLE="color:red">This paragraph will have text color red.</P>

CSS Properties

  • Color
body { color:red; }
h1 { color:#00ff00;}
p { color:rgb(0,0,255);}
  • Width & Height
p { height:100px;width:100px;}
  • Margin
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

CSS properties

  • Float : an element can be pushed to the left or right, allowing other elements to wrap around it.
 p { float:left }
  • Cursor : the type of cursor to be displayed when pointing on an element
 p { cursor:pointer}
  • Visibility
h1 {visibility:hidden;};
p {visibility:visible;}

Made with Slides.com