, - - . Windows - "". , "", .
""
-, "" , , :
HTML, , "". . "" , , , , , .
"" , , . , , .
, HTML- "", . "" Windows "" "".
html. , , -. " " "" . index.html, UTF-8 .
" ".
, . -:
- " Google Chrome" ( );
- ;
- , file://
file:///C:/Users/UserName/Desktop/my-site/index.html
, .
- HTML ( ). , , "" . HTML , . .
- , .
:
<h1> </h1>
<i>, </i>
.
, .
html-. :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>The Best Site in the World</title>
</head>
<body>
</body>
</html>
:
DOCTYPE
- , , ;html
- ;head
- , ;meta
- , charset ;title
- , ;body
- , .
( ) , - .
, "" HTML, , . .
:
HTML- :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>The Best Site in the World</title>
</head>
<body>
<div class="wrapper">
<header>
<a href="index.html">
<img src="images/logo.png" alt="" width="100">
</a>
<h1>John Doe</h1>
</header>
<nav>
<ul>
<li>
<a href="bio.html"></a>
</li>
<li>
<a href="life.html"> , </a>
</li>
<li>
<a href="gallery.html"></a>
</li>
<li>
<a href="contacts.html"> </a>
</li>
<li>
<a href="thanks.html"></a>
</li>
</ul>
</nav>
<main>
<article>
<h2>-</h2>
<div>
,
!!
</div>
<a href="posts/concert.html"> </a>
</article>
<article>
<h2> </h2>
<div>
...
</div>
<a href="posts/ice-cream.html"> </a>
</article>
<article>
<h2> ?</h2>
<div>
.
</div>
<a href="posts/to-be-or-not-to-be.html">
</a>
</article>
</main>
<footer>
John Doe (c) 2018
</footer>
</div>
</body>
</html>
- HTML5: header
, main
, nav
, footer
, article
.
:
- , . .
images
index.html
. width
100 .h1
, .- , . , .
h2
.- "" . .
wrapper
. .
:
. , .
, index.html
style.css
. .
:
, "", - .
, , css-. , head
.
<head>
<meta charset="UTF-8">
<title>The Best Site in the World</title>
<link rel="stylesheet" href="style.css">
</head>
, style.css
, . :
body {
background: #89745d;
}
:
body {
padding: 0;
font-family: sans-serif;
font-size: 16px;
background: #89745d;
}
.wrapper {
padding: 20px;
margin-left: auto;
margin-right: auto;
width: 960px;
}
header a {
text-decoration: none;
}
header img {
vertical-align: middle;
margin-right: 20px;
}
header h1 {
display: inline-block;
vertical-align: middle;
color: #f8d9b7;
}
nav {
padding-top: 20px;
padding-bottom: 20px;
}
nav ul {
margin: 0;
text-align: center;
}
nav ul li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
nav ul li a {
color: #f8d9b7;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
article {
padding: 20px;
margin: 20px 0;
background: #f8d9b7;
box-shadow: 0 0 15px #f8d9b7;
}
article h2 {
margin-top: 0px;
margin-bottom: 15px;
color: #d57106;
}
article a {
font-size: 14px;
font-style: italic;
color: #d57106;
}
footer {
padding: 20px;
text-align: right;
color: #f8d9b7;
font-size: 14px;
font-weight: bold;
}
:
- body : 16 .
- 960 .
- - , . , .
- .
, . - !
. - , , , .
. "" ?
. "" a
, . href
. index.html
.
(gallery.html
):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>The Best Site in the World</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header>
<a href="index.html">
<img src="images/logo.png" alt="" width="100">
</a>
<h1>John Doe</h1>
</header>
<nav>
<ul>
<li>
<a href="bio.html"></a>
</li>
<li>
<a href="life.html"> , </a>
</li>
<li>
<a href="gallery.html"></a>
</li>
<li>
<a href="contacts.html"> </a>
</li>
<li>
<a href="thanks.html"></a>
</li>
</ul>
</nav>
<main>
<div class="gallery">
<figure>
<img src="images/in-forest.jpg" alt="">
<figcaption> </figcaption>
</figure>
<figure>
<img src="images/winter.jpg" alt="">
<figcaption></figcaption>
</figure>
<figure>
<img src="images/on-beach.jpg" alt="">
<figcaption> </figcaption>
</figure>
<figure>
<img src="images/work.jpg" alt="">
<figcaption> </figcaption>
</figure>
<figure>
<img src="images/new-year.jpg" alt="">
<figcaption> </figcaption>
</figure>
<figure>
<img src="images/picture.jpg" alt="">
<figcaption></figcaption>
</figure>
</div>
</main>
<footer>
John Doe (c) 2018
</footer>
</div>
</body>
</html>
, , , main
, figure
. - .
style.css
, head
. :
.gallery {
font-size: 0;
}
figure {
display: inline-block;
vertical-align: bottom;
width: 33.3333%;
box-sizing: border-box;
padding: 10px 15px;
margin: 0px;
font-size: 14px;
color: #f8d9b7;
text-align: center;
}
figure img {
width: 100%;
margin-bottom: 10px;
}
css-, .
.
: "", - .
, , "". ! , .
, . -, .
, , . :
HTML- .
, html- "", . , . , .
- Visual Studio Code, Sublime Text, Notepad++. . , "", , . - .
"" - -.