HTML+CSS. HTML basics, semantics and main elements. (Module 2) презентация

HTML+CSS course Module 2. HTML basics: semantics and main elements

HTML basics : Agenda Semantics Main elements and their attributes Div, span Lists Links Images

Semantic HTML code Not semantic code <font size=“7"><b>This is a heading</b></font> Semantic code: <h1>This is a heading</h1>

More reasons to use semantic HTML It can be shorter and so downloads faster. It makes site updates easier. It is easier for people and especially machines to understand. It gives possibility to change the look without affecting HTML. It separates work on design and content.

Block and Inline Elements

Block Elements

Inline Elements

Divisions and spans

Classes and Identifiers

Inline elements: em or i, strong or b?

Inline elements: em or i, strong or b?

Small CSS spoiler for better explanation

Image element <img src="URL" alt="alternative text"> The <img> tag defines an image in an HTML page Required attributes: src and alt Optional attributes: width and height

Hyperlink element <a href=“page.html">Go to page</a> The <a> tag provides a hyperlink somewhere. Required attribute: href Optional attributes: type, target, title, rel

Hyperlink element <a href=“page.html“ type=“html” target=“_blank” title=“Some link” rel=“nofollow”> Go to page </a>

List element <ul> <li>Element 1</li> <li>Element 2</li> </ul>

Headings and paragraphs <h1>Biggest</h1> <h2>Smaller</h2> <h3>Smaller</h3> <h4>Smaller</h4> <h5>Smaller</h5> <h6>Smaller</h6> <p>Long text with lorem ipsumdolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>