Создание html страницы в блокноте: разъяснения для чайников. Пример создания html страницы в блокноте Скачать веб страницу html в блокноте


Всем-всем привет!

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

  • . Будем учиться редактировать код сайта с помощью данных редакторов;
  • . Поможем поисковому роботу понять структуру страницы;
  • . Узнаем насколько правильно составлен код сайта и найдем ошибки;

Как видите, на неделе у нас будет очень много работы, поэтому подписывайтесь на обновления блога Context-UP и получайте все уроки себе на почту, если Вы еще не подписаны.

Основы HTML

HTML (Hyper Text Markup Language) – это язык разметки документов в Интернете. То есть, любая страничка Вашего сайта – документ, а браузер – средство просмотра подобных документов.

Задача HTML – показать браузеру где находиться тот или иной элемент документа. C помощью данного языка, элементы размечаются на странице и занимают определенное место, которые затем отображаются на мониторе посетителя сайта.

Язык разметки состоит из специальных тегов, которые помогают браузеру определить:

  • Структуру документа;
  • Место нахождения того или иного элемента;
  • Предназначение элемента;
  • Подключаемые сторонние файлы;
  • И много-много другого.

Это понимают и поисковые роботы, поэтому нужно уделить особенное внимание тому, насколько правильно составлен документ с точки зрения SEO и какую структуру имеет.

Структура HTML

Любой HTML-документ имеет начальную структуру, которая должна соблюдаться в обязательно порядке. Выглядит она так:

Заголовок страницы Контент страницы

Необязательные атрибуты тега :

Чтобы рисунок был по центру, можно использовать тег ……./

2. Практическое задание №3

Вставка и форматирование графических изображений. Самостятельное создание Web-страниц драматических театров.

Урок №4

Связь с другими документами организуется тегами ….

текст гиперссылки .

< IMG SRC =’имя графического файла’>

2. Практическое задание №4

Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров.

Урок №5

1. Таблицы

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

С помощью таблиц удобно создавать навигацию по сайту.

Пример таблицы из двух строк (рядов), содержащих по две ячейки:

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

Основные атрибуты тегов

и
задают параметры таблицы, строки или ячейки:

ALIGN=left, right, center – выравнивание (

, ,
)

BGCOLOR=’цвет’ – фоновый цвет (

, ,
)

HSPACE=значение – свободное пространство слева и справа от таблицы в пикселах (

)

VSPACE=значение - свободное пространство сверху и снизу от таблицы в пикселах (

)

WIDTH=значение – ширина таблицы (ячейки) – в пикселах, или в процентах (

,
)

HEIGHT= значение – высоты таблицы (ячейки, строки) – в пикселах, или в процентах (

, )

BORDER= значение – толщина рамки вокруг таблицы и ее ячеек, по умолчанию значение=1, если значение=0, то рамки нет (

,
, ,
)

BORDECOLOR=’цвет’ – цет рамки ()

VALIGH=bottom, middle, top – выравнивание содержимого по вертикали (

)

2. Практичекое задание №5

Создание навигации по сайту в форме таблицы из одной строки

Уроки №6 и №7

1. Секция заголовка , мета-теги

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

В секции заголовка обычно помещается и ряд тегов с различными атрибутами, предоставляющими дополнительную информацию (метаинформацию) о Web-сайте:

Драматические театры Санкт-Петербурга

- - (указывается тип кодовой таблицы (windows-1251 , Koi8-R и другие), использованной при подготовке текстовой части документа.

- информация об


2024 © gtavrl.ru.