HTML - SoftUni

Download Report

Transcript HTML - SoftUni 

HTML5 and CSS
Very Short Introduction
SoftUni Team
Technical Trainers
Software University
http://softuni.bg
Table of Contents
1. What is HTML?
2. Basic HTML Tags

Headings, Paragraphs,
Images, Lists, Hyperlinks
3. Basic CSS Styles

Fonts, Colors, Borders, Margins,
Padding, Blocks, Inline Elements
4. HTML Forms and Input Fields
5. Creating a Very Simple Web Site
2
Have a Question?
sli.do
#2667
3
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
Attribute: key = "value"
<a href="/home">
Navigate to
<b>home page</b>
</a>
Element
Closing tag
4
HTML Page – Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Example</title>
</head>
<body>
<h1>Hello HTML!</h1>
<p>HTML describes formatted text using <strong>tags
</strong>. Visit the <a href="https://softuni.bg/courses/
web-fundamentals">SoftUni HTML course to learn
more.</a></p>
</body>
</html>
5
HTML – Developer Environments
 WebStorm
 Powerful IDE for HTML, CSS and JavaScript, paid product
 Visual Studio + Node.js Tools
 For many languages and technologies, Windows only
 Visual Studio Code, Brackets, NetBeans
 Good free tools for HTML5, cross-platform
 Sublime Text, Vim, Notepad++
 For hackers
6
Exercise: Welcome to HTML
 Create your first Web page:
 File name: welcome.html
 Title: Welcome
 Paragraph of text:
I am learning HTML and CSS!
 Hint:
 Modify the code from the previous slide
7
Headings and Paragraphs
 Headings:
<h1>First Heading (Biggest)</h1>
<h2>Second Heading (Smaller)</h2>
<h3>Third Heading (More Smaller)</h3>
<h4>Fourth Heading (Smallest)</h4>
 Paragraphs:
<p>First paragraph</p>
<p>Second paragraph</p>
<br> <!-- empty line -->
<p>Third paragraph</p>
Comment
8
Hyperlinks
 External hyperlink
<a href="https://softuni.bg">SoftUni</a>
 Local hyperlink
<h1 id="exercises">Exercises</h1>
…
See the <a href="#exercises" target="_blank">exercises</a>
 Relative hyperlink
<a href="../2.%20HTML5-Overview.pptx">presentation</a>
9
Exercise: Hello HTML
 Create your first Web page:
 File name: hello.html
 Title: Hello HTML
 Large heading: Hello HTML!
 Paragraph of text:
I am <your name (bold)>. I am
from <your town as link to your town's Web site>.
 Paragraph of text:
I study <specialty (italic)> at <link to SoftUni>.
10
Bullets and Numbered Lists
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
11
Exercise: My TODO List
 Create your first Web page:
 File name: todo.html
 Title: TODO List
 Large heading: My TODO List
 List of items:

HTML5 course @ SoftUni

Homework HTML & CSS

Teddy – birthday present
Hint: use &ndash; to
display the long hyphen –
12
Images
 Images are external files, inserted through the <img> tag
<img
src="images/SoftUni-logo.png"
alt="SoftUni logo (blue)"
width="400"
height="313" />
 Embedded image (Data URI)
<img alt="File Icon"
src="data:image/gif;base64,R0
lGODlPQoAJo+Pj/+pqcs…" />
13
Exercise: Fruits
 You are given 4 image files:
 apple.png
 banana.png
 kiwi.png
 organge.png
 Create a Web page like the
screenshot on the right
 Hint: use 3 paragraphs, each
holding 5 images
14
Basic HTML Tags
Live Exercises in Class (Lab)
What is CSS?
 CSS defines styling of the HTML elements
 CSS specifies fonts, colors, margins, sizes, positioning, floating, …
 Uses CSS declarations in format: property:value
 Inline CSS defines formatting rules for certain HTML element:
<p style="color: green; text-align: center; font-size:
30pt">I am a green big centered text paragraph</p>
16
Exercise: Colors
 Create a Web page like the screenshot below:
 Hints:
 Use a paragraph of text
 Use <span style="…">text</span> for the colored text
17
Fonts, Colors, Backgrounds, Borders, Padding
<p style="color: #AA77FF;
font-family: Consolas, monaco, monospace;
font-size: 24pt;
background: lightgray;
padding: 15px;
border-radius: 10px;
border: 2px solid
rgba(200,120,120,0.75)">Example</p>
18
Exercise: Rectangles
 Create a Web page like at the screenshot. Hints:
 Use 3 nested <div> elements
 Outside div: blue dotted border +
border-radius + padding
 Middle div: red dashed border +
border-radius + padding
 Inner div: green solid border +
border-radius + padding + text-align + font-size
 Use &lt; and &gt; to escape the < and > characters in the text
19
The Dev Tools / Styles Inspector / [F12]
20
Combining HTML and CSS Files
using-css.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css" href="styles.css">
</head>
<body class="modern"><p>
This is a <span class="special">
special beer</span> for <span class=
"special">special drinkers</span>.</p>
</body>
</html>
styles.css
.special {
font-style: italic;
font-weight: bold;
color: blue;
}
.modern {
background: #EEE;
}
p {
font-size: 24pt;
}
21
Exercise – Languages
 Create a Web page like at the screenshot. Hints:
 Create HTML file langs.html
 Create CSS file langs.css
 Link the CSS file in the HTML header
<link rel="…" href="langs.css">
 In the body CSS selector define:

background:#EEE; line-height:1.5em; font-size:24pt;
 Define and use a CSS class .lang for styling the languages:

Specify border:1px #AAA, border-radius, background:#CCC, padding
22
Solution – Languages (HTML + CSS)
languages.html
<!DOCTYPE html>
<html>
<head> <title>…</title>
<link rel="stylesheet" type=
"text/css" href="languages.css">
</head>
<body>
Programming … <span class="lang">
PHP</span>, <span class="lang">
JavaScript</span>, … purpose.
</body>
</html>
languages.css
body {
font-size: 24pt;
background: #EEE;
line-height: 1.5em;
}
.lang {
padding: 2px 10px;
border: 1px solid #AAA;
background: #CCC;
border-radius: 10px;
}
23
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>
24
Inline Elements
 <span> is inline element
 Its shape is not always rectangular
display: inline
 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 Software
University (SoftUni) in Sofia
(Bulgaria)</span>, good luck!</p>
25
Inline-Block Elements
 Elements can be also inline-block
 Rectangles arranged one after another
display: inline-block
 Just like words in a sentence
<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>
26
Exercise – Navigation Icons (HTML)
 Create a Web page (HTML + CSS) like at the screenshot:
<ul class="icons">
<li><a href="#"><img src="home.png"/>
<div>Home<div></a></li>
<li><a href="#"><img src="browse.png"/>
<div>Browse<div></a></li>
<li><a href="#"><img src="live.png"/>
<div>Live<div></a></li>
<li><a href="#"><img src="fav.png"/>
<div>Favorites<div></a></li>
…
</ul>
.icons { … }
.icons li { … }
.icons li a { … }
…
27
Exercise – Navigation Icons (CSS)
.icons {
background: #333;
text-align: center;
padding: /* TODO */
width: /* TODO */
border-radius: /* TODO */
}
.icons li {
display: inline-block;
}
.icons li a {
display: block;
width: 120px;
padding: 20px 5px;
border-radius: /* TODO */
text-decoration: none;
font: bold 12pt Arial;
color: /* TODO */
}
.icons li a:hover {
background: #594932;
color: #F0E0C9;
border: 2px solid #866129;
margin: -2px;
}
28
Styling with CSS
Live Exercises in Class (Lab)
HTML Forms
 HTML forms allow user to fill data
and send it to the server
 Input fields can hold text, number,
date, radio button, checkbox, …
 Creating a contact form:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br>
<input type="submit" value="Submit">
</form>
30
Exercise – Contact Us Form (HTML)
 Create a Web page (HTML + CSS) like at the screenshot:
<form>
<span>First name:</span>
<input type="text" name="firstname"><br>
…
<span>Town:</span>
<select name="town">
<option value="1">Sofia</option>
…
</select>
<input type="submit" value="Submit">
</form>
31
Exercise – Styling the Contact Us Form (CSS)
form {
background: #eee;
display: inline-block;
}
form span {
display: inline-block;
width: 80px;
background: #eee;
margin: 10px 3px 3px 8px;
}
form input, form select {
width: 150px;
height: 20px;
margin: 0px 5px;
box-sizing: border-box;
}
form select {
margin: 1px;
}
form input[type='submit'] {
display: block;
margin: 10px 0 12px 98px;
width: 80px; height: 30px;
}
32
Floating Elements
 HTML elements can float left and right
float:left
Some text around …
<div style=
"float:left">
float:left
</div>
no floating
block
Some text before …
<div style=
"margin:0 auto">
no floating block
</div>
float:right
Some text around …
<div style=
"float:right">
float:left
</div>
33
Exercise – Floating Elements (HTML)
 Create a Web page (HTML + CSS)
like at the screenshot:
<div class="left">left</div>
<p>The float CSS property …</p>
<div class="right">right</div>
<p>The float CSS property …</p>
<p>Without floating …</p>
<div class="center">no float</div>
<p>Without floating …</p>
34
Exercise – Floating Elements (CSS)
.left, .right, .center {
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
padding: 10px;
background: CornflowerBlue;
border-radius: 5px;
text-shadow: 0px 0px 5px
white;
}
.left {
float: left;
margin-right: 10px;
}
.right {
float: right;
margin-left: 10px;
}
.center {
margin: 0 auto;
}
35
Exercise – Very Simple Web Site
 Create a simple Web site (like at
the screenshot) consisting of:
 Header – holds site title
 Sidebar (left column) – menu

Home, About, Contacts (links)
 Main content (right column)

Home text, About text,
Contact us form
 Footer – holds copyright text
36
Solution – Very Simple Web Site (HTML)
<header>Very Simple Web Site</header>
<aside>
<a href="site-home.html">Home</a>
<a href="site-about.html">About</a>
<a href="site-contacts.html">Contacts</a>
</aside>
<main>
<p>HTML5 is a markup language used …
<p>It was published in October 2014 …
</main>
<footer>&copy; 2016 - Software University</footer>
37
Solution – Very Simple Web Site (CSS)
body {
margin: 0;
padding: 0;
font-family: Arial;
}
header, footer, aside, main {
background: beige;
margin: 10px;
padding: 5px;
text-align: center;
}
header {
font-size: 16pt;
font-weight: bold;
}
aside {
float: left;
margin-top: 0;
background: beige;
width: 100px;
}
38
Solution – Very Simple Web Site (More CSS)
aside a {
display: block;
text-align: left;
margin: 5px;
padding: 8px;
text-decoration: none;
color: brown;
}
aside a:hover {
background: BurlyWood;
border-radius: 3px;
}
main {
margin-left: 130px;
text-align: left;
background: #F5F5F5;
}
p {
margin: 10px 5px;
}
footer {
clear: both;
font-size: 11pt;
}
39
Creating a Very Simple Web Site
Live Exercise in Class (Lab)
Summary
 HTML describes text with formatting,
images, tables, forms, etc.

Uses tags like <p>, <img> and <a href="…">
 CSS adds styling to the HTML documents

Font, color, background, alignment, …

Layout, position, size, margins, paddings, …
 Web sites consist of HTML + CSS + images

May hold JavaScript code and other assets
41
HTML5 and CSS
?
https://softuni.bg/courses/software-technologies
License
 This course (slides, examples, demos, videos, homework, etc.)
is licensed under the "Creative Commons AttributionNonCommercial-ShareAlike 4.0 International" license
43
Free Trainings @ Software University
 Software University Foundation – softuni.org
 Software University – High-Quality Education,
Profession and Job for Software Developers

softuni.bg
 Software University @ Facebook

facebook.com/SoftwareUniversity
 Software University @ YouTube

youtube.com/SoftwareUniversity
 Software University Forums – forum.softuni.bg