We need the following things:
- Visual Studio Code IDE - a cool editor with plenty of opportunities
- Chrome or Firefox broser(last version)
- fantazy
- time
- persistence
Нам знадобляться такі речі:
- Visual Studio Code IDE - класний редактор з великою кількістю можливостей.
- браузер Chrome або Firefox (остання версія)
- фантазія
- час
- наполегливість
|
|
|
|
| Task | Завдання |
|---|
|
In order not to load the article with a large number of definitions, we will proceed to a task that we will gradually improve and supplement.
|
Щоб не навантажувати статтю великою кількістю визначеннь, Ми перейдемо до виконання задачі, яку поступово будемо вдосконалювати та доповнювати.
|
|
Task:
We will develop a page informative about our profile in stitti. We will show on it and information about yourself, a photo, some characteristics of the stitch (price of profile, period on the project, etc.), and a certain amount of their articles, for An example of the latter. And make a simple design for the page. |
Завдання:
Ми з вами розробимо сторінку, інформативного характеру, про наш профіль у стіміті.Вкажемо на ній і нформацію про себе , фото , певні характеристи зі стіміта (ціну профілю, період на проекті і т.д.), та певну кільсть своїх статтей, для прикладу останніх.Та оформимо простий дизайн для сторінки.
|
code profile.html file (copy to your html redactor and save)/код файлу profile.html (скопііюйте у редактор коду та збережіть)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<table>
<tr>
<td>
< img src="profilefoto.png"/>
</td>
<td><h3>Hello friends !!!</h3>
Nick : Mandarin2016 / In steemit from January 2018 <br>
Profile level : 38 / Steem Power : 15 / Voiting Power : 91%(charging)<br>
Account price : $17 / STEEM DOLLARS : $4 / STEEM : 0 <br>
Subscribers : 155 / Signed : 95 / Total 20 articles/ Total 70 comments<br>
</td>
</tr>
</table>
<table>
<tr><th>My posts List : </th></tr>
<tr><td>
<ul>
<li>
<a href="https://steemit.com/blog/@your-nick/your-post-link">
Templates, or how not to waste own time
</a>
</li>
<li>
<a href="https://steemit.com/blog/@your-nick/your-post-link">
Step by step HTML&CSS&JavaScript (What is HTML?)
</a>
</li>
<li>
<a href="https://steemit.com/blog/@your-nick/your-post-link">
The gadgets that help make steemit better
</a>
</li>
<li>
<a href="https://steemit.com/blog/@your-nick/your-post-link">
My little programming dream,part 2.5.(the line between idea and design).0.1 Brainstorm(Abstraction, Inheritance,Encapsulation ,Polymorphism)
</a>
</li>
<li>
<a href="https://steemit.com/blog/@your-nick/your-post-link">
My little programming dream,part 2(Specification / Preparation of execution)
</a>
</li>
<li>
<a href="https://steemit.com/blog/@your-nick/your-post-link">
My little programming dream,part 1(introduction)
</a>
</li>
</ul>
</td></tr></table>
<hr>
<div>
<center>disigned by <a href="https://steemit.com/@your-nick">@mandarin2016 </a> 2018</center>
</div>
</div>
</body>
</html>
Open profile.html in you browser(I'm use Chrome broowser)/Відкрийте profile.html у своєму веб-переглядачі (я використовую Chrome)
|
| Html tags | Html теги |
|---|
| In the picture above, you see the executed html code. The look of the page is not very, but I congratulate you, this is the first step in the creation. |
На картинці , вище, ви бачите виконаний хтмл код. Вигляд поки у сторінки не дуже, але я вас вітаю ,це перший крок у створенні. |
|
| I have used your data, you specify your own, it will be more interesting. |
Я використовував свої дані, ви вкажете свої, це буде цікавіше.
|
|
|
And now about the used tags. As I said tags, it is a building material, and each of them has its own function, and some have a static position in the code. More about our code:
|
А тепер про використані теги. Як я уже казав теги , це будівельний матеріал, і кожен зних має свою функцію , а деякі і статичну позицію у коді. Детальніще по нашому коду:
|
|
used tag
використаний тег | what does | Що робить |
|---|
<!DOCTYPE html>
|
Declares the document type and provides basic information for the browser - its language and version. |
Оголошує тип документа і надає основну інформацію для браузера - його мову і версія. |
|
<html>
|
Tells the browser that it is an HTML document.
|
Повідомляє браузеру, що це HTML-документ.
|
|
<head>
|
Container for auxiliary items such as "title", etc. |
Контейнер для допоміжних елементів ,таких як "title" і т.д. |
|
<title>
|
The subject of the HTML document that appears at the top of the browser header row.
|
Тема HTML-документа, що відображається у верхній частині рядка заголовка браузера.
|
|
<body>
|
The code container is actually the page itself
|
Контейнер коду власне самої сторінки
|
|
<div>
|
Tag-container for sections of an HTML document. Used when styling a page
|
Тег-контейнер для розділів HTML-документа.Використовується при стилізації сторінки
|
|
<table>,<tr>,<th>,<td>
|
"table" table container
"tr" table row
"th" table header
"td" table column, cell
|
"table" контейнер таблиці
"tr" рядок таблиці,
"th" заголовок таблиці
"td" колонка таблиці , комірка (ячейка)
|
|
< img>
|
Embeds the image into an HTML document using the "src" attribute, whose value is the embedded image address.
|
Вбудовує зображення в HTML-документ за допомогою атрибута "src", значенням якого є адреса вбудованого зображення.
|
|
<ul>,<li>
|
"ul" Creates a labeled list.
"li" Marked list item
|
"ul" Створює маркований список.
"li" Елемент маркованого списку
|
|
<a>
|
Creates hypertext links.
|
Створює гіпертекстові посилання.
|
|
<center>
|
exhibits content in the center
|
виставляє вміст у центрі
|
|
<hr>
|
Horizontal line for the thematic division of paragraphs.
|
Горизонтальна лінія для тематичного поділу параграфів.
|
|
<br>
|
Passes to a new line
|
Переходить на новий рядок
|
|
That's all we used to our code. By code, you may notice that there are paired and non-dummy tags,
|
Ось це все ми використали нашому коді. По коду ви можете помітити що є теги парні та не парні,
|
|
|
Some tags have their attributes such as "a" this is "src".
|
Деякі теги мають свої атрибути такі як у "a" це "src".
|
|
|
|
|
| CSS Stylesheet | CSS таблиці стилей |
|---|
a special language used to describe the appearance of pages.
Below I will show an example, a description left for a separate article because the material is quite powerful
|
спеціальна мова, що використовується для опису зовнішнього вигляду сторіно.
Нижче я покажу приклад , опис залишем для окремої статті оскільки матеріал доволі потужний
|
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
html,body{margin:0 auto;background-color:antiquewhite}
body > div{width:100%;height:100%}
.Profile{
}
.Posts {
border-collapse: collapse;
width: 100%;
}
.Posts th, td {
text-align: left;
padding: 8px;
}
.Posts tr:nth-child(even){background-color: #a84d4d}
.Posts th {
background-color: rgb(175, 76, 175);
color: white;
}
.Profile img {background-color: white}
.footer{position: absolute;bottom: 0;width: 100%}
a{text-decoration: none;color: red}
</style>
</head>
<body>
<div>
<table class="Profile">
<tr>
<td width="20%">
< img src="profilefoto.png" width="150px" height="150px"/>
</td>
<td><h3>Hello friends !!!</h3>
Nick : Mandarin2016 / In steemit from January 2018 <br>
Profile level : 38 / Steem Power : 15 / Voiting Power : 91%(charging)<br>
Account price : $17 / STEEM DOLLARS : $4 / STEEM : 0 <br>
Subscribers : 155 / Signed : 95 / Total 20 articles/ Total 70 comments<br>
</td>
</tr>
</table>
<table class="Posts">
<tr><th>My posts List : </th></tr>
<tr><td>
<a href="https://steemit.com/blog/@your-nick/your-post-link">
Templates, or how not to waste own time
</a>
</td></tr><tr><td>
<a href="https://steemit.com/blog/@your-nick/your-post-link">
Step by step HTML&CSS&JavaScript (What is HTML?)
</a>
</td></tr><tr><td>
<a href="https://steemit.com/blog/@your-nick/your-post-link">
The gadgets that help make steemit better
</a>
</td></tr><tr><td>
<a href="https://steemit.com/blog/@your-nick/your-post-link">
My little programming dream,part 2.5.(the line between idea and design).0.1 Brainstorm(Abstraction, Inheritance,Encapsulation ,Polymorphism)
</a>
</td></tr><tr><td>
<a href="https://steemit.com/blog/@your-nick/your-post-link">
My little programming dream,part 2(Specification / Preparation of execution)
</a>
</td></tr><tr><td>
<a href="https://steemit.com/blog/@your-nick/your-post-link">
My little programming dream,part 1(introduction)
</a>
</td></tr></table>
<div class= "footer">
<hr>
<center>disigned by <a href="https://steemit.com/@your-nick">@mandarin2016 </a> 2018</center>
</div>
</div>
</body>
</html>
|
| In the next article | У наступній статті |
|---|
| In the next article, we will dwell on the stylesheets.And as promised a list of interesting sites |
У наступній статті ми детальніше зупинимося на таблицах стилей.І як обіцяв список цікавих сайтів по матеріалу |
www.w3schools.com
html5book.ru/
htmlbook.ru/html
Чекаю коментів , поправок, та скріншотів ваших сторінок!!!
З ПОВАГОЮ!!!
I am waiting for the comments, corrections, and screenshots of your pages !!!
BEST REGARDS!!!
|
Щиро дякую. Дуже доступно, сподіваюсь, нарешті я це осилю і html не буде здаватись для мене чимось страшним. )
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit