Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
32 views

Lesson 1 - Introduction HTML Css

Uploaded by

Madalina Elena
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

Lesson 1 - Introduction HTML Css

Uploaded by

Madalina Elena
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

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

- represents the skeleton of a webpage


1. HTML Terminology
Tags - keywords enclosed between anchors (<html>,<a>, <p>,<h1>,<img>)

Elements - individual component of a webpage

Attributes - provide information about an element (id, class, href, src)


1. HTML Terminology
A few examples:
- the “a” element: <a></a>
- the “div” element: <div></div>
- the “img” element: <img/>
- the “href” attribute: <a href=”http://www.facebook.com”>Facebook</a>
- the “class” attribute : <div class=”class-name”></div>

- the “src” attribute: <img src=”http://example.com”></img


1. Divisions and Spans

- act as containers for the page content


- help divide the page
- no meaning or semantic value

- exist only for styling purposes


1. Basic web page structure
<!DOCTYPE html>

<html>

<head> ->(title, meta, link, scripts)

<title>Hello E-Business</title>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body> ->(header, document content)

<h1>Hello World</h1>

<p>This is your first web page</p>

</body>

</html>
2. Block vs. Inline vs Inline-block
Block elements :
- begin on new lines
- occupy any available width

- respect left, right top & bottom margins and padding

Inline elements:
- start anywhere in a line
- maintain the width of their content
- respect left & right margins and padding, but not top & bottom

- cannot have a width and height set


2. Block vs Inline vs Inline-block
Inline-block
- allow other elements to sit to their left and right
- respect top & bottom margins and padding

- respect height and width


2. Block vs. Inline vs Inline-block
2. Structural elements
- new in HTML5
- provide semantical value to containers
- block elements

- Ex: <header>,<section>,<nav>
2. Structural elements
Header (<header>) - top of the web page( introduction to page, navigation)

Navigation (<nav>) - primary navigation menus

Article (<article>) - independent self-contained content

Section (<section>) - break up page based on thematic content

Aside(<aside>) - mainly used for sidebars or menus


1. Css - Cascading Style Sheets

- give content style


- fonts, color, backgrounds

- describes the presentation of the document(html)


1. CSS Terminology
Selectors - identify an element or a set of elements you want to style ( type
selectors, class selectors, id Selectors)

Properties (width, height, font-size, color, background)

Values - defines the behaviour of a property

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

- absolute paths to pages outside your domain

Ex: <a href="www.youtube.com">youtube</a>

<a href="/contact.html">Contact</a>
3. Cascading

- cascade from top to bottom

- styles are overridden as the css file progresses

Ex:
a {

font-size: 16px;

color: blue;

}
a { font-size: 20px; }
3. Selectors
Type selectors:

- uses the element type (ex: p { color: red;}

Class selectors:

- uses the class attribute on the element ( ex: .my-class { font-size: 20px;}

Id selectors:

- uses the element's id attribute (ex: #my-id { background-color: red; }


3. Calculating Specificity
- every selector has a specificity weight
- the higher the specificity weight the more superiority the selector is given when
styling conflict appear

- id selector > class selector > type selector


3. Combining selectors

- By combining selectors we can be more specific about which element or


group of elements we’d like to select
- should be read from right to left

- key-selector is the selector farthest to the right


3. Combining selectors
HTML CSS

.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

Display: block / inline / inline-block / none;

Width/Height : length(px,pt, cm,etc) % / auto;

Margin/Padding : length(px,pt, cm,etc) / % / auto;

Background: color(keywords,hexadecimal notation, rgb)


4. The Box Model
- every element on the page is a rectangular box that may have height,
width, borders, margins properties set
4. The Box Model

width = margin-right + border-right + padding-right + width + padding-left +


border-left + margin-left

height = margin-top + border-top + padding-top + height + padding-bottom +


border-bottom + margin-bottom
4. The Box Model
Width - depends on the display property
- set using the width property
- block elements - 100%

- inline elements - expand and contract horizontally to accommodate their content

Height - depends by the element’s content

- set using the height property (only for non-inline elements)


4. The Box Model
Margin

- the amount of space that surrounds the element

- outside the element's border

Padding

- the amount of space between an element’s content and it’s border


4. The Box Model

Border:
- outline around the element
- solid, double, dash, dotted

- border corners can be rounded using the border radius property

Ex:
div { border: 6px solid #949599; }

div { border-bottom: 6px solid #949599;}

div { border-top-width: 2px;}


4. The Box Model

Inline elements treat margins and paddings differently:


- Margins only work horizontally—left and right

- 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

- possible values: content-box, padding-box, and border-box


5. Positioning Content
The Float Property:
- allows us to remove an element from the normal page flow
- can take left or right value
- originally used to wrap text around images
- all other elements will flow around the floated element
- heavily used in multiple columns layouts
- can impact styles of surrounding elements

- zero-height container problem for floated elements


5. Positioning Content
The Inline-Block method:
- done by setting the display property to inline-block value

- space between inline-block elements needs to be removed

Ex:
section {
display: inline-
block;
margin: 0 1.5%;
width: 30%; }
5. Positioning Content
Static - the normal position in the documents flow

Fixed - positioned relative to the browser’s window

Relative positioning:
- relative to itself

- possibility to use z-index on that element


5. Positioning Content
Position absolute:

- 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

- background-image is mainly used when the image is not relevant to the


content of the page
7. Best Practices
- use semantic elements as much as you can
- make sure you use the DOCTYPE declaration
- indentation makes the code readable
- inline styles are almost never a good idea

- comment your code


8. HTML exercise
● Create a basic project structure
a. Add an index.html file and an app.css file inside the app folder.
b. Inside the index.html create a basic page structure (don’t forget the Doctype declaration at
the top of the page.)
c. Give your page the ‘Home’ title;

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

● Create the products page


a. Create a new folder named products; add a products.html and a product.css file.
b. Add the header section similar with the landing page.
c. Create the product list using the float technique.
● Create the single product page
a. Add a new folder inside the products folder named “product”; add a new product.html and
product.css file.

b. Create a two column layout with the product image on the left side and a product
description on the right

You might also like