Step by step HTML&CSS&JavaScript (HTML tags, CSS Stylesheet)

mandarin2016(49)

Published in

#ua

Words

1201

Reading

6 min

Listen

Play

Step by step HTML&CSS&JavaScript
HTML tags, CSS Stylesheet

Content	Зміст
1. Introduction 2. Tools 3. Task 4. Html tags 5. CSS Stylesheet 6. In the next article	1. Вступ 2. Інструменти 3. Завдання 4. Html теги 5. CSS таблиці стилей 6. У наступній статті

Introduction	Вступ
Again the introductory word!	І знову вступне слово! Без нього як кажуть ніяк!
In this article, I will describe not all tags, as it will take a long time, and copypast is not professionally. In each article in this cycle, I will try to describe, more tags that more common and which should be implemented in practice.	У цій статті Я опишу нажаль не усі теги, оскільки це займе багато часу , і копіпастом займатись це не професійно. У кожній статті цього циклу, Я старатимусь, описати як омога більше тегів які більш поширені , та з якими прийдеться стикатись на практиці.
Many of the tags we will look at will reflect the post editor of steemit, so I advise you to take a look ,and take it on, and construct of interesting templates (I wrote about the templates and their value in this article (click this text to view) )	Багато з тегів ,які ми будемо розглядати, класно відображають і пост редакторі Стіміта, тому раджу придивитись і взяти на озброєння лдя побудови цікавих шаблонів(про шаблони і їх цінність я писав у цій статті (натисніть цей текст для перегляду))
At the end of the article I will leave a link for self-study, with interesting information on this topic.	У кінці статті Я залишу посилання для самостійного опрацювання, з цікавою інформацією по даній темі.

</tbody

Tools	Інструменти
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 (остання версія) фантазія час наполегливість

</tbody

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.	Завдання: Ми з вами розробимо сторінку, інформативного характеру, про наш профіль у стіміті.Вкажемо на ній і нформацію про себе , фото , певні характеристи зі стіміта (ціну профілю, період на проекті і т.д.), та певну кільсть своїх статтей, для прикладу останніх.Та оформимо простий дизайн для сторінки.

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)
alt

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".

</tbody

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	спеціальна мова, що використовується для опису зовнішнього вигляду сторіно. Нижче я покажу приклад , опис залишем для окремої статті оскільки матеріал доволі потужний

alt


<!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