'

Урок 1

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





Слайд 0

Основы web-дизайна и "сайтостроительства" <HTML>...</HTML> <HEAD>...</HEAD> <HTML>...</HTML> <HEAD>...</HEAD> <BODY>...</BODY> <TITLE>...</TITLE> <BODY>...</BODY> <TITLE>...</TITLE> <H1>...</H1> <H1>...</H1> <HTML></HTML> <HTML></HTML> <BODY></BODY> <BODY></BODY> Урок 1


Слайд 1

Сайт – это совокупность гипертекстовых страниц (чаще имеющая древовидную структуру) для представления предприятия, фирмы (корпоративные сайты), для представления школ (школьные сайты), частных лиц (личные сайты). Гипертекстовые страницы, которые составляют сайт, записываются на специальном языке HTML. Средства HTML служат для указаний браузеру, в каком виде выводить на экран текст и графику, а также позволяют записывать на страницах гиперссылки. <HTML>...</HTML> <HEAD>...</HEAD> <BODY></BODY> <TITLE>...</TITLE> <HTML>...</HTML> <BODY></BODY> <TITLE>...</TITLE> <HEAD>...</HEAD>


Слайд 2


Слайд 3

Структура HTML - кода Тег <HTML> должен открывать программу, а тег </HTML> - закрывать ее. Между этими двумя основными тегами располагается головная часть программы и тело. Головная часть содержит информацию, которая не отображается на экране монитора при просмотре web-страницы, а тело – все то, что мы видим на экране монитора как web-страницу. <HTML>...</HTML> <HEAD>...</HEAD> <BODY></BODY> <TITLE>...</TITLE> <HTML>...</HTML> <BODY></BODY> <TITLE>...</TITLE> <HEAD>...</HEAD>


Слайд 4

Базовая структура любого HTML-документа выглядит так: <!DOCTYPE HTML PUBLIC”-//W3C//DTD HTML 3.2//EN”> <HTML> <HEAD> <!-- заголовочная информация об этом документе, которая не показывается на экране --> </HEAD> <BODY> <!--- весь HTML-текст для показа на экране --> </BODY> </HTML> Строка: <!DOCTYPE HTML PUBLIC”-//W3C//DTD HTML 3.2//EN”> не является технологическим требованием, но сообщает браузеру, для какой версии HTML был написан данный документ. <HTML>...</HTML> <HEAD>...</HEAD> <BODY></BODY> <TITLE>...</TITLE>


Слайд 5

Заголовки В HTML-документе поддерживаются заголовки шести уровней при помощи конструкции <Hn>Текст заголовка</Hn> В качестве n следует использовать одну из цифр 1-6, обозначающую уровень заголовка. Тегом H1 нужно выделять заголовки первого уровня, тегом H2 – заголовки второго уровня и так далее. Использовать заголовки нужно очень аккуратно в соответствии с их иерархическими уровнями в структуре документа. Не следует использовать теги Hn для выделения обычного текста. <HTML>...</HTML> <HEAD>...</HEAD> <BODY></BODY> <TITLE>...</TITLE> <HTML>...</HTML> <BODY></BODY> <TITLE>...</TITLE> <HEAD>...</HEAD>


Слайд 6

Разделение на абзацы Для того, чтобы выделить часть текста как абзац, в HTML используется тег <P>. Он выглядит так: <P>Текст абзаца</P> Браузер выполняет команду Р следующим образом: Перед абзацем выводиться пустая строка Абзац выравнивается по левому краю Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML-коде Перенос текста на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда новая строка начинается в HTML-коде <HTML>...</HTML> <HEAD>...</HEAD> <BODY></BODY> <TITLE>...</TITLE> <HTML>...</HTML> <BODY></BODY> <TITLE>...</TITLE> <HEAD>...</HEAD>


Слайд 7

Работа со шрифтами Язык HTML позволяет указать браузеру, в каком начертании следует отображать на экране монитора фрагменты текста: Курсивом, Жирным, Подчеркнутым или их комбинации. Теги начертания шрифтов <B>Это жирный</B> <I>Это курсив</I> <U>Это подчеркнутый</U> Слишком частое применение тегов начертания шрифтов может сделать текст неудобным для чтения. <HTML>...</HTML> <HEAD>...</HEAD> <BODY></BODY> <TITLE>...</TITLE> <HTML>...</HTML> <BODY></BODY> <TITLE>...</TITLE> <HEAD>...</HEAD>


Слайд 8

Кодирование цвета <HTML>...</HTML> <HEAD>...</HEAD> <BODY></BODY> <TITLE>...</TITLE> <HTML>...</HTML> <BODY></BODY> <TITLE>...</TITLE> <HEAD>...</HEAD>


Слайд 9

Выравнивание абзацев <P align=left> - выравнивает абзац по левому краю <P align=right> - выравнивает абзац по правому краю <P align=center> - выравнивает абзац по центру <P align=justify> - выравнивает абзац по ширине <HTML>...</HTML> <HEAD>...</HEAD> <BODY></BODY> <TITLE>...</TITLE> <HTML>...</HTML> <BODY></BODY> <TITLE>...</TITLE> <HEAD>...</HEAD>


×

HTML:





Ссылка: