Обзор и конспект 2-го урока (HTML) “HTML/CSS + JavaScript 2015 Стань сильным Junior Frontend” GOIT

Это обзор и конспект по курсу HTML/CSS + JavaScript 2015 Стань сильным Junior Frontend продолжительностью 110 часов на русском языке (24,1 Гб). (по ссылке нужно переходить со включенным VPN).

Сайт авторов курса

Обзор и конспект первого урока(HTML) “HTML/CSS + JavaScript 2015

Изначально первые два урока я проходил не делая конспекты, но после завершения 4-ого занятия решил вернуться к первым двум, повторить и законспктировать. Вернулся не зря, очень многое позабылось. После этого урока по мере свободного времени займусь изучением 5-ого и последующих уроков этого курса.

Пройденные темы в уроке:

Кодировка
Блочные и строчные элементы
Тег <div>
Тег <span>
Списки
Различные виды нумерованных списков
Список «словарь определений»
Меню
Семантические теги
Таблицы
Объединение ячеек
Группировка блоков таблиц
Формы

План занятия

• Разбор ДЗ
• <!DOCTYPE> , режимы браузеров, кодировка
• Блочные и строчные элементы
• <div> и <span>
• Списки
• Семантические теги
• Таблицы
• Формы

!DOCTYPE

!DOCTYPE может выглядеть так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd> ;

<!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]// [Тип] [Имя]//[Язык]" “[URL]">

В HTML 5 он обычно выглядит так: <!DOCTYPE html>

Кодировка

В <head> указывается кодировка HTML документа. Эта информация не видна в браузере, но влияет на отображение страницы. Автор курса рекомендует пользоваться только кодировкой “utf-8”, любые другие не использовать.

Блочные и строчные элементы

Вся HTML страница состоит из элементов. Элементы бывают двух типов: строчные и блочные.

<h1> – блочный элемент
<p> – блочный элемент
<strong> – строчный элемент

Блочный элемент занимает одну строку полностью и заполняет её собой настолько насколько позволяют границе окна.

Строчный элемент может стоять в одной строке с другими строчными элементами или текстом.

Тег div

<div> – блочный элемент, который не несёт никакой семантической нагрузки. Он как серая коробка внутрь которой можно положить всё что угодно.

Тег span

<span> – строчный элемент, который так же как и “div” не несёт семантической нагрузки, но выстраивает контент в строку.
В примере выше пробелы между элементами “span” получились из-за переноса строки, которые воспринимаются браузером как пробельные символы.

Списки

Не нумерованный список:

<ul> – тег создающий не нумерованный список (блочный элемент)

<li> – пункт в списке, создаётся внутри <ul> ;

Лайфхак для редактора: ul>li*3 – создать не нумерованный список <ul> с тремя пунктами <li>

Нумерованный список:

<ol> – тег создающий нумерованный список (блочный элемент)

<li> – пункт в списке, создаётся внутри “ol”

Лайфхак для редактора: ol>li*3 – создать нумерованный список <ul> с тремя пунктами <li>

Вложенные списки

Если вставить внутрь элемента <li> тег <ul> или <ol> то поучается вложенный список.

Различные виды нумерованных списков

Добавляя свойства к “ol” можно получить различные виды списков:
«start=» – начать нумерацию с определённого номера

«reversed» – обратная нумерация

«type="A"» – нумерация большими английскими буквами

«type="a"» – нумерация маленькими английскими буквами

«type="I"» – нумерация большими римскими цифрами

«type="i"» – нумерация маленькими римскими цифрами

Список «словарь определений»

Семантические теги

Семантические теги — это теги, которые предназначены для того чтобы компьютерные программы (поисковые системы, сборщики информации, речевые браузеры и т.д.), понимали какой тип информации заложен в данных тегах.

Пример семантического тега:

Блок <nav> говорит о том что ссылки внутри него посвящены навигации.

Семантические теги:
• section
• article
• aside
• header
• footer
• nav
• figure
• figcaption
• time
• mark
• main

Их описание можно посмотреть здесь: htmlbook.ru/html/

Таблицы

<table> - тег создающий таблицу
«border=”1”» - граница в 1 пиксель для каждого элемента таблицы

<tr> - строки
<th> - шапка таблицы
<td> - ячейки с данными в таблице

Последовательность составления таблицы:

Создаётся первая строка <tr> и описываются все ячейки в этой строке <th> с лева на право
Создаётся вторая и последующие строки и описываются все ячейки в этой строке <td> с лева на право

Таблицы в HTML всегда должны быть прямоугольными. Другие формы таблицы можно сделать только визуально.

Объединение ячеек

«colspan=xx» - атрибут для <th>, <td> объединяющий ячейки по горизонтали с лева на право
«rowspan=xx» - атрибут для <th>, <td> объединяющий ячейки по вертикали с верху вниз

Объединение по горизонтали:

<table border=”1”>
<tr>
<td colspan=”2”>First</td>
</tr>
<tr>
<td>Second</td>
<td>Third</td>
</tr>
</table>

Результат:

объединение по вертикали

<table border="1">
  <tr>
    <td rowspan="2">First</td>
    <td colspan="2">Second</td>
  </tr>
  <tr>
    <td>Third</td>
    <td>Fourth</td>
  </tr>
</table>

Результат:

Группировка блоков таблиц

<thead> - элемент предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Допустимо использовать не более одного элемента <thead> в пределах одной таблицы, и он должен идти в исходном коде сразу после тега <table>.

Пример кода:

<table style="width: 200px;">
   <thead style="background: #fc0">
    <tr>
     <td> Заголовок1 </td>
     <td> Заголовок2 </td> 
    </tr> 
   </thead>
   <tbody style="background: #ccc">
    <tr>
     <td> Данные1 </td>
     <td> Данные2 </td> 
    </tr> 
   </tbody>
  </table>

В браузере:

<tbody> - элемент предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты. Допускается применять несколько тегов <tbody> внутри контейнера <table>. Доступны и другие виды группировок строк — <tfoot> и <thead>, ни один из них не должен перекрываться с элементом <tbody>.
Пример кода:

<table width="200" border="1">
   <thead style="background: #fc0">
    <tr>
     <td> Заголовок1 </td>
     <td> Заголовок2 </td> 
    </tr> 
   </thead>
   <tbody align="right">
       <tr>
     <td>Данные1</td>
     <td>Данные2</td> 
    </tr> 
   </tbody>
  </table>

В браузере:

<tfoot> - элемент предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы. Хотя тег <tfoot> в исходном коде должен быть определен до тега <tbody>, браузеры отображают его в самом низу таблицы. В пределах таблицы разрешается использовать только один элемент <tfoot>.
Пример кода:

<table width="250">
      <thead style="background: #fc0">
    <tr>
     <td> Заголовок1 </td>
     <td> Заголовок2 </td> 
    </tr> 
   </thead>
    <tfoot align="left" style="background: #ffc">
    <tr>
     <td>Данные tfoot 1</td>
     <td>Данные tfoot2</td> 
    </tr> 
   </tfoot>
   <tbody align="right" style="background: silver">
    <tr>
     <td>Данные tbody1</td>
     <td>Данные tbody2</td> 
    </tr> 
   </tbody>
  </table>

В браузере:

<caption> - предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <table>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.
Пример кода:

<table width="100%" border="1" cellspacing="0" cellpadding="4">
   <caption>Текст caption</caption>  
   <thead style="background: #fc0">
    <tr>
     <td> Заголовок1 </td>
     <td> Заголовок2 </td> 
    </tr> 
   </thead>
    <tfoot align="left" style="background: #ffc">
    <tr>
     <td>Данные tfoot 1</td>
     <td>Данные tfoot2</td> 
    </tr> 
   </tfoot>
   <tbody align="right" style="background: silver">
    <tr>
     <td>Данные tbody1</td>
     <td>Данные tbody2</td> 
    </tr> 
   </tbody>
  </table>

В браузере:

<col> - задает ширину и другие характеристики одной или нескольких колонок таблицы, слева направо. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег <col> можно использовать совместно с тегом <colgroup>, который задает группу колонок, обладающих общими характеристиками.
Пример кода:

<table width="400" border="0" cellpadding="5" cellspacing="0">
   <col width="150">
   <col width="250">
   <tr>
    <td style="background: #B0B28E">Как сообщает  издание cointelegraph китайский регулятор требует от торговых площадок  прекратить торговлю криптовалютой. Это подтверждает, что торговля  криптовалютой за фиатные деньги становится незаконной в поднебесной. 
    </td>
    <td style="background: #CCCCCC">Lina Lun — обозреватель WashingtonPost? опубликовала в своем твиттере  документ на китайском языке, где как она утверждает содержится указание  торговым площадкам OKcoin и Huobi до конца сегодняшнего дня (15  сентября) определиться с планом прекращения работы.
    </td>
   </tr>
  </table>

В браузере:

Формы

<form name="search" action="/">
 <input type="text" name="t" value="goit"/>
 <input type="submit" value="Search"/>
</form>

<form> - тег создающий форму.
«name="search"» - нужен для работы с JS, в статическом HTML этот атрибут можно не писать.
«action="/"» - обязательный атрибут для формы
<input> - нужен для ввода в форму информации
«type="text"» type может быть разным, в данном случае это обычный текст
«value="goit"» - текст по умолчанию введённый в форму
«input type="submit"» - создаёт кнопку, которая будет сохранять и отправлять форму
«value="Search"» - текст который будет написан в кнопке “search”, если не указывать этот атрибут, то в каждом браузере будет свой текст определённый им по умолчанию
Пример кода формы:

<form action="#">Имя:
 <input type="text name="firstname" />
 <br/>
 Фамилия:
 <input type="text" name="lastname" />
 <br/>
 Пароль:
 <input type="password name="pwd" />
 <br/>
 <input type="radio" name="sex" value="male" />Мужской
 <input type="radio" name="sex" value="female" /> Женский
 <br/>
 <input type="checkbox" name="vehicle" value="bike" /> У меня есть мотоцикл
 <br/>
 <input type="checkbox" name="vehicle" value="car" /> У меня есть автомобиль
 </form>

«type="radio"» - элемент радиогруппы, обязательный атрибут “name” который должен быть одинаковым для всех элементов этой радиогруппы, и это обозначает что они будут связаны. Атрибут “value” служит для отправки формы на обработку.

«type="checkbox"» - элементы чекбоксов, которые передаются на обработку списком

«type=”reset” value=”reset”» - можно добавить в форму кнопку “reset” которая сбрасывает все установленные значения. В первую очередь это нужно для сброса дефолтных значений в сложных формах.

Возможные значения для “type=text”

HTML 4+	HTML 5+:
text	search
password	email
button	url
reset	tel
submit	number
image	range
hidden	time
checkbox	date
radio	datetime-local
file	week
-	month
-	color

Textarea

<textarea rows="4" cols="20" name="mytext"> 
Тут можно расположить большой многострочный текст…
</textarea>

«rows="4"» - количество строк
«cols="20"» - количества символов в одной строке
Перенос строк в этой форме работает

Select

<select name="food">
 <option value="pie">Пирог</option>
 <option value="bread" selected="selected">Хлеб</option>
 <option value="cookie" label="Печенье"></option>
</select>

«option value="pie"» - в форме “select” можно выбрать одну из опций, значение “value” передаётся для обработки

Select для выбора нескольких элементов:

<select name="food" size="3" multiple="multiple">
<option value="pie">Пирог</option>
<option value="bread" selected="selected">Хлеб</option>
<option value="cookie" label="Печенье"></option>
</select>

«multiple="multiple"» - позволяет выбирать несколько пунктов из “select”
«size="3"» - обязательный атрибут, который говорит о том на сколько строчек по высоте будет располагаться предложенный список, если значений будет больше чем указано в этом атрибуте, то появится скролл. Чтобы выбрать несколько элементов из списка необходимо зажать клавишу “ctrl”.

Опт группа

<select>
 <optgroup label="Шведские авто">
 <option value="volvo">Вольво</option>
 <option value="saab">Сааб</option>
 </optgroup>
 <optgroup label="Немецкие авто">
 <option value="vw">Фольксваген</option>
 <option value="audi">Ауди</option>
 </optgroup>
</select>

Обзор и конспект 2-го урока (HTML) “HTML/CSS + JavaScript 2015 Стань сильным Junior Frontend” GOIT

Сайт авторов курса

Обзор и конспект первого урока(HTML) “HTML/CSS + JavaScript 2015

Пройденные темы в уроке:

План занятия

!DOCTYPE

Кодировка

Блочные и строчные элементы

Тег div

Тег span

Списки

Различные виды нумерованных списков

Список «словарь определений»

Меню

Семантические теги

Таблицы

Объединение ячеек

Группировка блоков таблиц

Формы

Домашняя работа

Выполненное задание 1

Выполненное задание 2

Выполненное задание 3

Выполненное задание 4

Другие конспекты по этому курсу:

Конспект по уроку 1 (HTML)

Конспект по уроку 3 (CSS)

Конспект по уроку 4 (CSS)