'

Верстка сайтов

Понравилась презентация – покажи это...





Слайд 0

Верстка сайтов Введение


Слайд 1

Оглавление Основные понятия Тэги и элементы разметки Управление визуальным представлением документа Правила написания кода


Слайд 2

Основные понятия Сайт Веб-страница Браузер Гиперссылка Язык разметки Тэг Код страницы


Слайд 3

Сайт, страница, браузер Сайт — это набор связанных между собой веб-страниц. Каждая страница представляет из себя текстовый документ, созданный с использованием определенных правил.   Веб-страницы просматриваются с помощью программ-браузеров. Наиболее известные и популярные браузеры это Internet Explorer, FireFox, Opera, Chrome.   Страницы связанны между собой с помощью ссылок (или гиперссылок, линков) — особым образом выделенных элементов, нажатие на которые приводит к переходу к другому документу.


Слайд 4

Язык разметки Правила, с помощью которых создается веб-страница, называются языком разметки.   Язык разметки, полное название которого HyperText Markup Language (HTML) предназначен для описания структуры страниц, того как они должны отображаться на экране браузера. Примеры 1, 2


Слайд 5

Тэги, код страницы То есть, веб-страница содержит не только текст, но и специальные метки — тэги (tag), указывающие браузеру, как отображать тот или иной фрагмент документа. Все тэги заключены в скобки из знаков "<" и ">".   Поскольку то, что мы пишем в документе, и то, что мы видим на экране браузера различается, то текст документа называют еще кодом страницы, исходным кодом, или просто кодом.


Слайд 6

Текст страницы, не содержащей разметки отображается сплошным потоком


Слайд 7

Разметка задает структуру и визуальное представление документа


Слайд 8

Тэги и элементы разметки Описание элемента Структура документа Типы элементов


Слайд 9

Описание элемента Тэги описывают элементы документа   <h1>Учебный центр</h1>   В коде страницы каждое описание типа элемента обычно состоит из начального, или открывающего тэга — <h1> содержимого элемента — «Учебный центр» закрывающего тэга — </h1>   Такие тэги обычно называют парными.   Есть тэги, не имеющие содержимого, например <img /> или <br />. Такие тэги называют непарными, или одиночными.


Слайд 10

Тэги и элементы Элементы - это не тэги. Некоторые называют элементы тэгами (например, «тэг P»). Помните, что элемент — это одно, а тэг (начала или конца, неважно) — другое.


Слайд 11

Структура документа


Слайд 12

Каждая веб-страница состоит из трех частей Определения типа документа (объявление DOCTYPE, DTD). Указывает браузеру, какая именно версия языка разметки используется. Заголовка документа (head). Содержит служебную информацию. Тела документа (body). Содержит информацию, непосредственно отображаемую на экране.


Слайд 13

Типы элементов В языке HTML предусмотрено большое число различных элементов, но к основным и наиболее часто используемым можно отнести: абзац — p заголовки — h1, h2, h3, h4, h5, h6 гиперссылки — a списки — ol (нумерованный), ul (маркированный) элементы списка — li изображения — img элементы для описания таблиц — table, tr, td символ перехода на новую строку — br горизонтальная линия — hr («морально» устаревший элемент, приводится в качестве примера)


Слайд 14

Вложенность элементов Элементы могут быть вложены один в другой   <p><a href="address.html>Адрес и схема проезда</a></p>


Слайд 15

Свойства элементов С элементами могут быть связаны свойства, называемые атрибутами. Свойства могут иметь значение, а могут обходится и без него   <img src="images/logo.gif" width="139" height="57" alt="Логотип центра" /> <hr noshade width="600" align="left" />   Пары атрибут/значение помещаются перед закрывающей скобкой ">" начального тэга элемента.


Слайд 16

Замещаемые и незамещаемые элементы Все элементы разметки разделяются на замещаемые и незамещаемые Замещаемые элементы —это те, содержимое которых замещается чем-то, что не содержится непосредственно в документе. Наиболее очевидный пример элемент img, замещаемый файлом изображения. <img src="images/logo.gif" /> Этот элемент разметки не имеет реального содержимого — только имя элемента и атрибут. И он ничего не будет представлять на экране, пока мы не укажем для него внешнее содержимое — файл logo.gif. Большинство элементов — незамещаемые. Это означает что браузер отображает их содержимое, находящееся между открывающим и закрывающим тэгами.


Слайд 17

Отображение элементов Элементы также можно разделить на отображаемые и не имеющие визуального представления. Например, элемент meta, используемый в заголовке страницы, элемент br, осуществляющий перевод строки, или элемент nobr, указывающий, что нельзя осуществлять разрыв страницы в выделенной области.


Слайд 18

Управление визуальным представлением документа Презентационные возможности языка HTML Использование CSS


Слайд 19

Презентационные возможности языка HTML HTML — это, в первую очередь, язык для описания структуры документа. Но в нем есть и возможности для управления визуальным представлением — элементы (font, hr) и атрибуты элементов (bgcolor, color, size, width). Пример 3


Слайд 20

Презентационные возможности языка HTML Использование этих возможностей допустимо, но крайне не желательно в серьезных проектах, поскольку в этом случае:   усложняется код; ухудшается читабельность кода; появляются проблемы при использовании для просмотра страницы мобильных устройств или других нестандартных браузеров; усложняется модификация и сопровождение кода.


Слайд 21

Использование CSS Правильный подход — использование возможностей CSS (Cascading Style Sheets). CSS — это язык для описания стилей, визуального отображения страницы. Пример 4


Слайд 22

Правила написания кода В своей работе мы будем следовать правилам, определяемым стандартом XHTML (eXtended HTML) 1. Все теги должны быть записаны в нижнем регистре, то есть нельзя писать <BODY>, а надо писать <body> 2. Все теги должны быть закрыты 2a. В случае, если элемент не имеет закрывающего тега (например, <IMG> или <BR>), надо добавлять слэш в конце тега <img /> и <br /> 3. Вложенность тегов должна быть корректной. Например, нельзя писать <B><P>текст</B></P>, а надо писать <p><b>текст</b></p>. 4. Все атрибуты должны быть заключены в кавычки. Например, нельзя писать <P ALIGN=center>, а надо писать <p align="center">.


Слайд 23

Спасибо за внимание! Александр Вознюк дизайнер http://www.fishdesign.com.ua/voznuk/ http://www.free-lance.ru/users/voznuk


×

HTML:





Ссылка: