Ideas of modern web-design
The lecture, built as a living page. Every idea below works on this very page, so you can click it, resize it and look at its code.
Sklyarenko Vlad
DOCTYPE, lang, title
<!DOCTYPE html> is the very first line. It is a DOCTYPE declaration: it tells the browser this is modern HTML5.
lang="en" is an attribute (<tag attribute="value">). It helps search engines and screen readers know the language of the page.
<title> is the text on the browser tab. Look up: this page's tab says Project 0.
HTML headings h1 – h6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Document Object Model
The browser turns your HTML into a tree. Each tag is a node, and the text inside is a node too.
- html
- head
- title
- Project 0. Ideas of modern web-design
- title
- body
- h1
- Sklyarenko Vlad
- img
- h1
- head
JavaScript changes the DOM
Press Go. The script reaches the field through the DOM path document.fr.fname.value and replaces the text.
LIVE DEMO
Cascading Style Sheets, three ways
This page uses all three. Inline: the style="" attribute on the name above. Internal: the <style> block in <head>. External: the file style.css.
Common properties
| color | the color of text |
|---|---|
| text-align | where elements are placed on the page |
| background-color | can be set to any color |
| width / height | in pixels or percent of a page |
| padding | how much space is left inside an element |
| margin | how much space is left outside an element |
| font-family | type of font for text on the page |
| font-size | in pixels |
| border | size, type (solid, dashed…) and color |
Box model playground
Move the sliders and watch the grey box. The blue frame is the border.
Total width on the page = width + padding×2 + border×2 + margin×2.
Viewport and @media queries
The viewport meta tag makes the page match the real screen width of a phone. An @media query then changes the style depending on that width. Resize your window, or turn your phone sideways.
Wide screen: #fae5a6. Narrow screen: white. The breakpoint is 600px.
Flexbox container
One <div id="container"> holds the six project boxes. With display: flex they line up, and flex-wrap decides what happens when the row is full. Try it:
Resize the window: the boxes re-flow by themselves, with no extra code.
Who reads your page?
A search engine sends a web spider (crawler) through the web. Good HTML, with lang, a title and real headings, helps it understand your page.
- Bing
- Yahoo
- Yandex
- Baidu
- DuckDuckGo
- Ask
- Crawls the web sites
- Copies the information in web sites
- Stores it in the data base
- Displays the results from the data base