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

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

Устройство интернет-мира

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

Moscow Coding School

Презентация

Artec 3D

Artec Eva Artec Spider Artec Leo

Shapify Booth

Artec Group

День 1

Процесс веб разработки

Прототип

Дизайн

Верстка

Профессии

DevOps инженер

Devops

Гибкая методология разработки

agile

Cистема отслеживания ошибок

jira

Веб-сервер

HTML - структура веб-страницы.
CSS - внешний вид веб-страницы.
JavaScript - поведение элементов на веб-странице.

Uniform Resource Locator

ftp - протокол передачи файлов FTP
http - протокол передачи гипертекста HTTP
https - протокол HTTP с шифрованием

narod.ru

Internet Protocol Address

188.40.41.77

www.htmlweb.ru

Домены первого уровня

Домены

Блокнот

Notepad

Sublime

WebStorm

Интегрированная среда разработки

Алгоритмы

Алгоритм - набор инструкций, описывающих порядок действий исполнителя для достижения некоторого результата.

Блок-схема алгоритма

Язык программирования

Язык программирования - определенный зарезервированный набор слов, предназначенный для записи компьютерных программ.

Компьютерная программа

Компьютерная программа - комбинация компьютерных инструкций и данных, позволяющая компьютеру выполнять вычисления или функции управления.

Редактор текста

Дерево 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