Веб-разработка для новичков. День 2

Василика Климова

Основы создания веб-странички

Василика Климова
Разработчик интерфейсов
Artec 3D

Moscow Coding School

День 2

Дерево DOM

DevTools

HTML

Основные понятия верстки

Тег - HTML команды

Атрибут - различные свойства тегов

<тег атрибут="значение">содержимое</тег>

Элемент разметки - совокупность пары тегов, атрибутов и содержимого

HTML

<!DOCTYPE html>

Тип текущего документа и его синтаксис

Тег head

<head>

Включает заголовок страницы
и техническую информацию
Не отображается напрямую на веб-странице

</head>

Тег body

<body>

Тег хранит содержимое веб-страницы

</body>

Head. Тег title

<title>

Заголовок страницы на вкладке браузера

</title>

Head. Тег meta

<meta>

Хранит информацию для браузеров и поисковых систем

<meta name="keywords" content="HTML, метатег, тег">

Head. Тег style

Cтили элементов веб-страницы

        <style type="text/css">
          h1 { 
            font-size: 22px; 
            color: #666666;  }
        </style>
      

Head. Тег link

<link>

Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.

<link rel="stylesheet" href="ie.css">

Head. Тег script

<script>

Описание скриптов JavaScript

</script>
      <script type="тип" src="URL"></script>
    

Body. Блочные элементы

<div>

Выделяет часть документа для изменения ее вида

Body. Строчные элементы

<span>

Выделяет часть внутри блока для изменения ее вида

HTML5

<header>
<footer>
<nav>
<aside>
<audio>
<video>
...

Практическая часть

Выводим на странице

Практическая часть

Выводим на странице

Полезные ссылки

Василика Климова

likita
vasilika.klimova
lik04ka

Навигация

Список всех уроков

Fork me on Github