HTML and CSS Overview
HTML Basic Tags, CSS Introduction
HTML (HyperText Markup
Language)
What is HTML?
What is HTML?
• The HTML language describes Web content (Web pages)
• Text with formatting, images, lists, hyperlinks, tables, forms, etc.
• Uses tags to define elements in the Web page
Opening tag
Element
<p>
<b>Document</b> content goes here…
</p>
Closing tag
3
HTML Page – Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Example</title>
</head>
<body>
<h1>Hello HTML!</h1>
<p>HTML describes formatted text using <strong>tags
</strong>. Visit the <a href="[Link]
courses">SoftUni HTML course to learn more.</a></p>
</body>
</html>
4
Problem: Welcome to HTML
• Create your first HTML page
• File name: [Link]
• Title: Welcome
• Paragraph of text:
I am learning HTML and CSS!
• Hints:
• Modify the code from the previous slide, use <strong> tag
• Submit the page in the judge: [Link] in a ZIP file
5
HTML – Developer Environments
• WebStorm
• Powerful IDE for HTML, CSS and JavaScript, paid product
• Visual Studio
• Many languages and technologies, Windows & Mac
• Visual Studio Code, Brackets, NetBeans
• Good free tools for HTML5, cross-platform
• Sublime Text, Vim, Notepad++
• For hackers
6
Developer Tools: [F12] in the Browser
7
Zen Coding (Emmet) for Fast HTML Coding
ul>[Link]*6 div#page>[Link]+ul#menu>li
*3>a
<ul> <div id="page">
<li class="red"></li> <div class="logo"></div>
<li class="red"></li> <ul id="menu">
<li class="red"></li> <li><a href=""></a></li>
<li class="red"></li> <li><a href=""></a></li>
<li class="red"></li> <li><a href=""></a></li>
<li class="red"></li> </ul>
</ul> </div>
8
HTML Common Elements
Used in 90% of All Internet Sites
Headings and Paragraphs
• Headings: <h1> to <h6>
<h1>This is Heading 1 (Biggest)</h1>
<h2>This is Heading 2 (Smaller)</h2>
<h3>This is Heading 3 (More Smaller)</h3>
<h4>This is Heading 4 (Smallest)</h4>
• Paragraphs: <p></p>
<p>First paragraph</p>
<p>Second paragraph</p> Comment
<br /> <!-- empty line -->
<p>Third paragraph</p>
10
Hyperlinks
• External hyperlink Specify the URL
<a href="[Link]
• Local hyperlink
<h1 id="exercises">Exercises</h1>
…
See the <a href="#exercises" target="_blank">exercises</a>
• Relative hyperlink
<a href="../2.%[Link]">presentation</a>
11
Images
• Images are external files, inserted through the <img> tag
<img
src="images/[Link]"
width="400"
height="313" />
• Embedded image (Data URI)
<img src="data:image/gif;base64, R0lGODlhEAAOAL…"/>
<img src="data:image/gif;base64, R0lGODlhEAAOAL…"/>
12
Problem: Fruits
• You are given 4 image files:
• [Link], [Link],
[Link], [Link]
• Create a Web page like the
screenshot on the right
• Hints: use 3 paragraphs, each
holding 5 images
13
Ordered Lists: <ol> Tag
• Create an Ordered List <ol type="1">
<li>One</li>
• Use <ol></ol> <li>Two</li>
• Each holding <li></li> <li>Three</li>
</ol>
▪ Attribute values for type are 1, A, a, I, or i
14
Unordered Lists: <ul> Tag
• Create an Unordered List using <ul></ul>:
<ul type="disc">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
▪ Attribute values for type are: disc, circle, square and none
15
Definition Lists: <dl> Tag
• Create definition lists using <dl>
• Holds terms (<dt>) with their definitions (<dd>)
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
16
Problem: Wiki Page
• Create the following HTML page: (page continues here …)
17
Hints: Wiki Page
• File name: [Link]
• Title: The Brown Bear
• Use <h1>
• Hyperlink: [Link]
• List: use ordered list and unordered list
• Text: use paragraph
• Image: use the file [Link]
18
HTML Terminology
Tags, Attributes and Elements
HTML Tags, Attributes and Elements
Element ID Attribute: key = value
<a id="link" href="[Link]
Attribute (CSS HTML element
class)
Opening tag
<div class="item">
<img src="[Link]" />
Element body
<span>Books</span>
(content)
</div>
Closing tag
20
Cascading Style Sheets
What is CSS?
What is CSS?
• CSS defines styling of the HTML elements
• Specifies fonts, colors, margins, sizes, positioning, floating, …
• CSS rules format: selector { prop1:val1; prop2:val2; … }
• CSS rule example:
Opening curly brace
Selector h1 {
font-size: 42px; Declaration
color: yellow;
Closing curly brace }
Property Value
22
Combining HTML and CSS Files (External Style)
[Link] [Link]
<!DOCTYPE html> .special {
<html> font-style: italic;
<head> font-weight: bold;
<link rel="stylesheet" type="text/css" color: blue;
href="[Link]"> }
</head>
<body class="modern"><p> .modern {
This is a <span class="special"> special background: #EEE;
beer</span> for <span class= "special">special }
drinkers</span>.</p>
p {
</body> font-size: 24pt;
</html> }
23
Problem: To Do List
• Create the following page
(HTML + CSS files)
• Hints:
• Container: use <div>
• Background color: #f7f381
• Heading: use <h1>
• Date: use <p> + center it
• List: use <ol>
24
Solution: To Do List (HTML)
[Link]
<!DOCTYPE html>
<html>
<head><!-- TODO: link the CSS here --></head>
<body>
<div class="my-list">
<h1>Today's to do list</h1>
<p>TODO: Put day-info here</p>
<ol>TODO: Put list-item here</ol>
</div>
</body>
</html>
25
Solution: To Do List (CSS)
[Link] [Link]
.my-list { .my-list ol {
margin: 0 auto; margin: 12px;
padding: 8px 24px; }
width: 500px; .my-list p {
font-size: 30px; text-align: center;
border: 1px solid #f7f381; }
background: #f7f381;
box-shadow: 0 0 10px 2px #333333;
}
26
Inline CSS Style
• The style attribute in HTML elements
Attribute "style"
<h1 style="color:blue">This is a blue …
</h1>
Property Value
<h2 style="color:red; font-size:2.1em">
This is a red …
Multiple CSS
</h2>
declarations
27
Embedded CSS Styles in the HTML Page
• Put a <style> element in the HTML <head> section
<!DOCTYPE html> <body>
<html> <p class="red">This is red</p>
<head> </body>
<style>
.red {
color:red;
}
</style>
</head>
</html>
28
Inline and Block Elements
<div> vs. <span>
Block Elements
• <div> and <p> are block elements (rectangles)
• Fill the entire container width
display: block
• Stack vertically one after another
<p style="border:1px solid red;
text-align:center">centered</p>
<div style="border:1px solid
blue">DIV</div>
<p style="border:1px solid red;
text-align:right">right</p>
30
Inline Elements
• <span> is inline element
• Its shape is not always rectangular
• Can be split across multiple lines
<p style="text-align:justify">
Welcome <span style="color:white;
background:blue; padding-right:3px;
padding-left:3px;">to the
University of Greenwich </span>,
good luck!</p>
Inline-Block Elements
• Elements can be also inline-block
• Rectangles arranged one after another
• Just like words in a sentence
display: inline-block
<div style="text-align:justify;">
<div style="display:inline-block;
background:green">green</div>
<div style="display:inline-block;
background:red">red block</div>
…
</div>
32
More HTML Problems
Problem: HTML Lists
• Create a HTML page, holding
nested lists, like at the example
• Hints:
• Use <ol> and <li> for
List Item 1, List item 2 and List Item 3
• Use <ol>, <li>, <ul> and <li> for the nested lists
34
Solution: HTML Lists
[Link]
<ol type="I">
<li>List item 1
<ol type="a">
<li>Nested item 1.1</li>
<li>Nested item 1.2</li>
</ol>
</li>
<!-- TODO: put List item 2 and List item 3 here -->
</ol>
35
Solution: HTML Lists (2)
[Link]
<li>List item 2
<ol type="1">
<li>Nested item 2.1</li>
<li>Nested item 2.2
<ul type="circle">
<li>Nested item 2.2.1</li>
<li><!-- TODO: put the next items here--></li>
</ul>
</li>
<li>Nested item 2.3</li>
</ol>
</li>
36
Solution: HTML Lists (3)
[Link]
<li>
List item 3
<ul type="disc">
<li>Nested item 3.1</li>
<li><!-- TODO: put the next items here --></li>
</ul>
</li>
37
Summary
• HTML describe structured content (text, images, tables,
figures, etc.)
• Commonly used HTML tags:
• <html>, <head>, <body>, <p>, <h1>, <h2>,
<h3>, …, <ol>, <ul>, <li>, <a href="…">,
<img src="…">, <div>, <span>
• <div> is block element
• <span> is inline element
• CSS styles may be: еxternal, inline, embedded
38