1. HTML/CSS learning – continuation
- Display elements: inline vs. block
An inline element does not start on a new line and it only takes up as much width as necessary.
Examples: <a>, <span>, <img>, <small>, etc.
The easiest way to put an inline element on the next line is to use <br>
A block element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
Examples: <div>, <p>, <h1> - <h6>, <hr>, <header>, <main>, <nav>, <ul>, <ol>, <article>, <section>, <aside>, <table>, etc.
- CSS Selectors: Element, Class, ID
- Element selector examples:
p, body, head, main, footer, a:link, a:active, a:visited, etc.
More
HTML 5 tags (in alphabetical order), which do not require Class or ID names
- Class selector: .name {....}
- Id selector: #name {....}
Notes:
1. You can use class selector in the same html document many times.
The class selector starts with a dot (class name cannot start with a number).
2. You should use id selector in an html document just once; usually it is used for any kind of box except for
HTML5 semantic elements.
3. You can apply the id and the class to the same element, for example:
In CSS:
#wrapper {
width: 960px;
height:800px;
margin: auto;
}
.red {color:right;}
In HTML:
<div id="wrapper" class="red">
Content of this box
</div>
- * (asterisk) - selects all elements in CSS
Example: *{box-sizing: border-box;}
- , (comma) serves to list the elements, which will be selected together
Example: body, div, span and iframe will have margin 0, padding 20 pixels and border 0
body, div, span, iframe {
margin: 0;
padding: 20px;
border: 0;
}
-
HTML5, very basic structure
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Here goes title</title>
<style> (for internal CSS)
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to My Webpage</h1>
<section>
</section>
<section>
</section>
<article> (to define an independent content such as articles, blog posts,etc.)
</article>
</main>
<footer>
<small>Company © The name. All rights reserved.</small>
</footer>
</body>
</html>
-
Typical HTML5 page
- HTML5 deprecated elements (in your handout)
2. Understanding directories
Practice:
REMEMBER:
- Always (!) keep HTML files and all images in THE SAME folder!!!
- Always (!) name the home page index.html with all lower-case letters in this folder.
3. Project 1 - webpage "About Me".
Part 2 - independent version:
Due 90% - next class
Start with the pencil sketch of a layout
The page will have:
- Your name
- Your portrait
- Several paragraphs of relevant information
- Several links
- Additional items of your choice
Examples:
Example 1
Example 2
Example 3
Find more layout ideas on the Internet
Remember:
- Use HTML5 syntax
- Use internal or inline CSS
- The page name is index.html
- Make the page width around 800px
- All files have to be in one folder
- All paths have to be correct
ellenbaryshev@gmail.com.