Lesson 1 - Introduction HTML Css
Lesson 1 - Introduction HTML Css
The Basics
Agenda
1. Definitions and Semantics Overview
2. Diving into HTML
3. Building the webpage (html)
4. Diving into CSS
5. The Box Model
6. Positioning Content
7. Adding Media
8. Colouring time
9. Best Practices
10.Assignment
1. HTML - HyperText Markup
Language
- gives content structure and meaning
- headings, paragraphs, images, etc
<html>
<title>Hello E-Business</title>
</head>
<h1>Hello World</h1>
</body>
</html>
2. Block vs. Inline vs Inline-block
Block elements :
- begin on new lines
- occupy any available width
Inline elements:
- start anywhere in a line
- maintain the width of their content
- respect left & right margins and padding, but not top & bottom
- Ex: <header>,<section>,<nav>
2. Structural elements
Header (<header>) - top of the web page( introduction to page, navigation)
h1 {
color: blue;
font-size: 16px;
}
2. Linking between pages
Creating Hyperlinks:
- used to link resources and pages
- identified by the href attribute
- relative paths to links pointing to other pages on the website
<a href="/contact.html">Contact</a>
3. Cascading
Ex:
a {
font-size: 16px;
color: blue;
}
a { font-size: 20px; }
3. Selectors
Type selectors:
Class selectors:
- uses the class attribute on the element ( ex: .my-class { font-size: 20px;}
Id selectors:
.parent p {
<div class="parent"> background: brown;
<p>...</p> }
<p>...</p> .one p.child{
<p class="child">...</p> background: yellow;
</div> }
3. Common property values
Padding
Border:
- outline around the element
- solid, double, dash, dotted
Ex:
div { border: 6px solid #949599; }
- Padding work on all sides but the top and bottom paddings can bleed into
the lines above and below an element.
4. The Box Model
Box sizing:
- adaptive design until CSS3
- change how the box-model works and how the element’s height is
calculated
Ex:
section {
display: inline-
block;
margin: 0 1.5%;
width: 30%; }
5. Positioning Content
Static - the normal position in the documents flow
Relative positioning:
- relative to itself
- positions the elements relative to the first parent element that is non-
statically positioned
6. Adding Media
- using the inline <img> element
- the <img> element doesn’t wrap any other type of content
- the “src” element is needed to specify the source of the image
- can also take the “alt” attribute
- can also be added with the background-image property in CSS
d. Link your css file in your index.html using the link tag;
● Body:
a. create a section for the whole banner area. Add the “hero-banner” id;
b. in the section, create the <header> Add the “header” id;
c. in the header, in a <h1> tag, add a link <a class=“home-link”> pointing to ./index.html. Name
it “Qlab”.
d. in the header, create a <nav id=“nav”> containing a unordered list of links pointing to Home
(index.html), About, Contact; (doesn’t matter if they’re not created, we’ll do it later);
HTML exercise
● Mid section, outside the header
a. “E-Business Master”: create a div containing a <h1> tag. The div should have “banner-text”
id;
b. "HTML and CSS demo”: in the div, wrap it up in <h3> tags
c. “Learn More” button: in the div, make it link to http://wikipedia.com; (remember how to do
it?)
● Bottom
d. Closesection
the div, close the section;
a. Create a new section. Give it “section-one” id;
b. “Lorem Ipsum”, wrap it up in <h tags and give it a number in order to make it big>
c. Write 20 random words in another <h and make them look smaller compared to the ones
above>;
HTML exercise
● The bottom images
a. create a div with the classes “col one”;
b. in that div, create another div with the class “image-wrapper”;
c. in the image wrapper div, use the img tag with the src pointing to the “user-icon.png”;
d. close the img, the image wrapper div, and the “col one” div tags;
e. do the all of the above for the other two images, note and update the coloured words!
f. close the section, the body and the html tags;
8. Assignment
b. Create a two column layout with the product image on the left side and a product
description on the right