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">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}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;} HTML &amp;amp;amp; CSS
By Bogdan Posa
