Html документ как создать – Как написать простую HTML-страничку / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

Содержание

Как создать html документ 🚩 Веб-программирование

Инструкция

HTML-файл является обычным текстовым документом, в котором с помощью специальных дескрипторов задается расположение элементов контента относительно друг друга или окна браузера. Просмотреть работу файла можно через интернет-обозреватель. Чтобы отредактировать код HTML, можно воспользоваться текстовым редактором или подобрать специальные программы, имеющие такие функции, как автоматический ввод и подсветка синтаксиса. Примером приложения, хорошо подходящего для удобной работы с подобными документами, является Sublime Text 2.

При использовании редактора кода в главном меню программы выберите пункт File («Файл») - Save As... («Сохранить как...»). В открывшемся диалоговом окне вам понадобится указать директорию для сохранения файла, а также имя и расширение. Можно сконвертировать текстовый документ в HTML-страницу, дописав в конце имени расширение html.

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

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

Парный <html> </html> является дескриптором, в который заключается все содержимое веб-страницы. Элементы кода, которые находятся за пределами этого тега, отображаются как обычный текст или блокируются браузером, за исключением <DOCTYPE!>. Дескриптор <html> является обязательным и не может быть использован на странице более одного раза.

При помощи <head> </head> указывается основная информация о документе. Между этими тегами с помощью дескрипторов <title> </title> задается заголовок веб-страницы, а посредством <link> подключаются файлы CSS или JavaScript. Таким же образом внутри парного тега <head> указываются стили, кодировка, тип документа, версии оформления для разных браузеров или устройств и некоторые другие параметры. Содержимое тега не отображается в окне браузера, однако дескриптор является обязательным.

Между тегами <body> и </body> заключено тело сайта - информация, которая выводится на экран пользователя. Это могут быть заголовки, подзаголовки, параграфы и строки текста, изображения, видео или другие объекты мультимедиа. Дескриптор является обязательным. Кроме того, внутри него могут быть использованы другие элементы <header>, <article> или <footer>. Они не влияют на отображаемый результат, но создают структуру HTML-кода, что считается хорошим тоном в кругах web-разработчиков или верстальщиков.

Создание html-документов.

28

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

Дескрипотор - это простой элемент разметки, который всегда имеет такой вид: <ДЕСКРИПТОР>. Контейнеров называется пара дескрипторов HTML в форме: <ДЕСКРИПТОР></ДЕСКРИПТОР>. Элемент <ДЕСКРИПТОР>служит для включения, а </ДЕСКРИПТОР> для выключения того же объекта. Например, рассмотрим строчку кода HTML:

<I>Это предложение выделено курсивом</I> А это - нет.

Открывающий дескриптор <I> включает курсив, а дескриптор </I>. На экране появится строка этого документа, которая будет выглядеть следующим образом:

Это предложение выделено курсивом. А это - нет.

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

Ниже приведен самый простой документ HTML. Весь документ заключен между дескрипторами <HTML> и </HTML>. Первая часть этого документа содержится в контейнере <HEAD> и </HEAD>, в который в свою очередь помещен контейнер <TITLE> и </TITLE>. И наконец, тело этой страницы находится в контейнере <BODY> и </BODY>

Простейший HTML-документ

Не удивительно, что основным из всех дескрипторов, которые используются для создания документа HTML, является дескриптор <HTML>. Этот дескриптор должен быть первымэлементом документа, а соответствующий ему дескриптор </HTML> - последним. Вместе эти дескрипторы указывают на то, что между ними расположен отдельный документ HTML. Это важно, поскольку документ HTML является простым текстовым файлом ASCII. Без таких дескрипторов броузер или другая программа не смогут индефицировать формат документа и правильно интерпретировать его содержимое.

Закрывающий дескриптор </HTML> также необходим, как и открывающий. Сейчас практикуется включение документов HTML в сообщения электронной почты и новостей, а без дескриптора </HTML> получатель не будет знать, где заканчивается код HTML.

Элемент <BODY>.

Хотя кажется, что развитие WWW идет в направлении интерактивных средств, боль-цинство людей, которые просматривают ваши документы, все же интересует именно их екст. Это особенно справедливо в отношении тех документов, которые создаются для корпоративных сетей intranet или используются в качестве электронных учебников и текстов. Преобразуете ли вы существующий документ или создаете новый - в любом случае вам придется потратить много времени на работу над телом документа.

Прежде чем вы заполните тело своего документа, нужно создать его основную структуру. Чтобы документы HTML правильно интерпретировались, в них должна соблюдаться определенная последовательность элементов. Вместо того, чтобы каждый раз заново набирать элементы, которые используются во всех документах HTML, рекомендуем вам создать шаблон и использовать его для всех своих страниц. Благодаря шаблону вы не упустите из виду ни одну существенную деталь. В конце этой главы мы создадим шаблон, который вы сможете использовать на первых порах. А пока будем использовать пример, приведенный в самом начале главы по WEB-дизайну.

Базовый документ HTML

Данный пример начинается с дескриптора <HTML>, который, как вам уже известно, является обязательным во всех документах HTML. За ним следует дескриптор <HEAD>, открывающий заглавную часть документа. В нем имеется обязательный элемент TITLE. Мы озаглавили этот документ "Образец документа". Раздел заголовка заканчивается дескриптором </HEAD>. И наконец, элемент <BODY> - здесь вы должны поместить основную часть материала вашего документа. Не забудьте закрыть элемент тела дескриптором </BODY> и закончить страницу дескриптором </HTML>.

Поскольку HTML - язык разметки, тело вашего документа включается открывающим дескриптором <BODY>. Все, что идет после этого дескриптора, интерпретируется в соответствии со строгим набором правил, которые сообщают броузеру о содержимом. Тело документа оканчивается закрывающим дескриптором </BODY>.

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

В предыдущем документе основной текст представляет собой одну строку. В реальном документе замените эту строку соответствующим текстом. Если вы не используете специальный редактор HTML, то следует вводить текст, используя строго определенный формат ASCII.Это ограничивает ваши возможности набором тех знаков, которые могут быть интерпретированы любым существующим компьютером.

Большинством броузеров несколько непустых пробелов (табуляция, знаки конца строки) воспринимаются как один сплошной пробел. Несколько пробелов обычно сливаются в один.

Атрибуты элемента <BODY>

Элемент BODY имеет большое количество атрибутов, и все они важны для определения общего вида документа. В таблице перечислены эти атрибуты и их функции; далее о каждом из них будет рассказано подробно.

Атрибуты элемента BODY и их назначение

Атрибут

Назначение

ALINK

Определяет цвет, которым выделяется активная ссылка

BACKGROUND

Указывает URL изображения, который следует использовать в качестве фона документа

BGCOLOR

Определяет цвет фона документа

BGPROPERTIES

Если этот атрибут имеет значение fixed, то изображение фона не будет прокручиваться

LEFTMARGIN

Определяет ширину левого поля в пикселях

LINK

Определяет цвет ссылки, которая не была посещена

TEXT

Определяет цвет текста

TOPMARGIN

Определяет ширину верхнего поля в пикселях

VLINK

Определяет цвет ссылки, которая была посещена

Структура HTML документа, как создать первую web страницу

Прежде чем понять, что такое структура html документа и перейти к ее разбору нам нужно выбрать программу в которой мы будем реализовывать наш план. Просто использовать NotePad++ или Блокнот не целесообразно. Лично Я использую программу Sublime Text 3, она отлично подходит для взаимодействия с кодом и упрощает жизнь во многих моментах. По желанию вы так же можете разобраться в программе Brackets от Adobe. Она тоже очень хороша, но на мой взгляд работает значительно дольше чем Sublime.

 

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

 

Для того, чтобы начать разбор, мы должны создать отдельную папку в которой будет хранится наш первый html файл. Для этого открываем наш Sublime Text 3 и переходим в раздел File > New File. Вы увидите, что у Вас создался новый файл и он будет открыт в новой вкладке редактора. Теперь нажимаем сочетание клавиш CTRL+S  и сохраняем наш документ в папку проекта с название index.html. Абсолютно все файлы типа html, имеют расширение html или htm. Для стартового файла, с которого начинается сайт всегда используем имя index. Это очень важно т.к. при загрузки вашего веб сайта первым делом браузер обращает внимание на этот файл. В итоге у вас выйдет готовый документ, но он пока пустой. Давайте перейдем непосредственно к созданию структуры.

Все страницы html состоят из тегов, их минимальное количество — это три тега на страницу. Они бывают:

  1. Парные/Непарные
  2. Закрывающиеся/Незакрывающиеся

Если мы откроем код любого сайта в интернете, мы можем заметить что они начинаются с одной и той же строки — это декларация типа документа или “доктайп”. На данный момент существует несколько версий html, и тип документа необходим, чтобы браузер смог правильно отобразить страницу и определить версию языка.

Для старых версий языка doctype выглядел так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">

В новых версиях, начиная с версии HTML5 и выше определяется следующим образом:

Мы можем открыть наш файл в браузере, где мы увидим путь к нашему файлу и белый экран т.к. ничего кроме базового тега мы не прописывали.

Так давайте это исправим и напишем следующий тег <html></html>.

<!doctype html> <html> </html>

<!doctype html>

<html>

</html>

Этот тег относится к типу закрывающийся и в нем располагается вся информация нашего документа. Т.е все действия связанные в дальнейшем с разработкой будут происходить именно в этом теге.

Следующим шагом мы прописываем закрывающийся тег <head></head>. Он служит для нашей структуры html документа как служебным тегом. В нем мы можем описать title нашей страницы, подключить скрипты, css стили или написать meta данные.  Давайте теперь рассмотрим и пропишем эти теги в нашем документе.

<title></title> — тег отвечающий за название нашей страницы. Обычно в нем прописывается название вашей организации или название сайта. В нашем случае для примера мы напишем:

<!doctype html> <html> <head> <title>Наш первый сайт</title> </head> </html>

<!doctype html>

<html>

<head>

<title>Наш первый сайт</title>

</head>

</html>

Следующим шагом мы зададим нашему документу meta описание.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Наш первый сайт</title> </head> </html>

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Наш первый сайт</title>

</head>

</html>

Этот тег говорит нашему браузеру, какую кодировку нужно использовать. Важно знать, что  каждый тег имеет свой атрибут и его значение. Чтоб было более понятно в коде выше атрибутом является «charset», а значением «utf-8». Значение атрибута всегда заключается в кавычки. Также есть и другие виды тега «meta», такие как «keywords» «description» и др.. Но это уже тема семантической разметки.

Давайте разберем тег под названием <body></body>. Боди тег закрывающийся и содержит в себе основную информацию страницы. Т.е после того как мы прописали выше перечисленные теги, нам нужно перейти к созданию информации, которая будет отображаться на сайте и видна пользователям.  Чтобы увидеть это наглядно, давайте пропишем еще несколько тегов.

<h2></h2> — тег в котором указывается заголовок страницы. Существует 6 уровней заголовков от h2-h6. Обычно используют h2 один раз на странице, h3 подзаголовок второго уровня он может использоваться несколько раз и заголовок 3-го уровня h4. Все остальные уровни заголовков используются в крайне редком случае. Поймите одно, что каждый уровень заголовка идет один за другим от h2(самый большой) и до h6(самый маленький). Нельзя использовать теги в такой последовательности h2-h3-h4-h3, важно соблюдать последовательность.

<p></p> — тег параграфа. В нем заключается код текста на нашей странице. Он является блочным и всегда начинается с новой строки. Если вы хотите сделать абзацы, тогда каждый из них заключается в этот тег. Величиной можно управлять с помощью стилей.

В результате у нас получится вот такая структура нашего документа:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Наш первый сайт</title> </head> <body> <h2>Наш первый документ</h2> <p>Наш первый текст Наш первый текст Наш первый текст</p> </body> </html>

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Наш первый сайт</title>

</head>

<body>

<h2>Наш первый документ</h2>

<p>Наш первый текст Наш первый текст Наш первый текст</p>

</body>

</html>

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

Подробнее об этой статье в моем видеоуроке по структуре html документа, где мы разбираем все вышеперечисленное:

 

Оставляйте свои комментарии ниже, нам очень важно знать ваше мнение и о чем бы вы хотели узнать в следующих наших уроках.

comments powered by HyperComments

Создание HTML – документа

Создание HTML – документа

Симонова Татьяна Адлеровна

учитель информатики

МОУ «Лицей №3»

г.Прохладный КБР

Задание№1.

Создайте в редакторе Блокнот HTML - документ с текстом «Этот небольшой сайт посвящен семье Ивановых..»

Сохраните его в своей рабочей папке под именем index.htm и просмотрите его в браузере.

Цель упражнения.

Изучение основ языка HTML. Знакомство со структурой HTML – документа.

Порядок выполнения.

  1. Запустите Блокнот.

  2. Введите:

<TITLE>Сайт семьи ИвановыхTITLE>

Этот небольшой сайт посвящен семье Ивановых.

  1. Сохраните документ под именем index.htm в своей рабочей папке.

  2. Просмотрите сохраненный документ в браузере Internet Explorer.

  3. Практические рекомендации.

  1. Запустите Блокнот, щелкнув кнопку Пуск и выбрав Программы/ Стандартные/ Блокнот.

  2. Введите теги обозначения HTML – документа < HTML > < /HTML> между которыми должен располагаться весь остальной код.

  3. Так как HTML – документ состоит из двух частей (заголовочной и кода), между открывающим и закрывающим тегами < HTML > введите открывающие и закрывающие теги заголовочной части (<HEAD> и ) и тела документа ( и ).

Примечание.

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

4. Внутри заголовочной части документа впишите титул

<TITLE> Сайт семьи Ивановых TITLE>

5. В теле документа неформатированный текст пишется без тегов:

Этот небольшой сайт посвящен семье Ивановых.

6. Теперь ваш документ должен выглядеть так

Сайт семьи Ивановых

Этот небольшой сайт посвящен семье Ивановых

7. Сохраните файл под именем index.htm в своей рабочей папке, воспользовавшись командой Файл/Сохранить как.

hello_html_m5e512ff3.gifhello_html_m78c8b352.gifhello_html_m2c7186b9.gifhello_html_41b87dd4.gifhello_html_6644fbb8.png

Примечание.

По умолчанию Блокнот сохраняет документы с расширением .txt независимо от того, что указано в поле Имя файла диалогового окна Сохранить как. Чтобы сохранить файл с расширением .htm необходимо в списке Тип файлов этого окна предварительно выбрать Все файлы, а затем в поле Имя файла указать имя с расширением, например index.htm.

Если HTML – файл сохранен правильно, то в окне папки будет сопоставлен значок hello_html_m7a95903b.png

Просмотр сохраненной страницы.

  1. Запустите Internet Explorer

  2. В меню Файл щелкнуть Открыть.

  3. Щелкнуть кнопку Обзор. В списке папок выберите свою рабочую папку, а в ней – файл - index.htm.Щелкнуть кнопку Открыть.

  4. Изучите открывшийся документ. Найдите, где отображается текст, помещенный в тегах <TITLE>

Задание №2

Скопируйте файл index.htm дважды, назвав получившиеся файлы semya.htm, dostihenia.htm, peremena.htm. Свяжите все файлы гиперссылками. Проверьте работу файла.

Цель упражнения.

Изучение основ HTML. Освоение приемов связывания HTML – страниц гиперссылками.

Порядок выполнения

  1. Скопируйте файл index.htm.

  2. Переименуйте скопированный файл в semya.htm

  3. Скопируйте еще раз файл index.htm. и назовите его dostihenia.htm

  4. Скопируйте еще раз файл index.htm. и назовите его peremena.htm

  5. Запустите Блокнот и откройте файл index.htm.

Примечание.

По умолчанию в диалоговом окне Открыть, вызываемой по команде Файл/Открыть, отображается только текстовый документ. Чтобы найти и открыть HTML – файл в списке Тип файлов этого окна предварительно следует выбрать Все файлы.

hello_html_1212a095.pnghello_html_6f9c5abb.gifhello_html_m154da7cb.gif

  1. Дополните документ ссылками на файлы semya.htm, dostihenia.htm, peremena.htm. Для этого введите в тело документа теги.

  2. Теперь ваш документ должен выглядеть так:

Сайт семьи Ивановых

Этот небольшой сайт посвящен семье Ивановых.

Наша семья

Наши достижения

Это интересно

  1. Сохраните файл.

  2. Откройте в Блокноте файл semya.htm.

  3. Дополните его ссылкой на главную страницу (index.htm), вписав в тело следующий текст


Вернуться на главную страницу

  1. Измените титул

Наша семья

12.Сохраните файл.

  1. Повторите шаги 9-12 для файлов dostihenia.htm, peremena.htm

В качестве титула напишите

Наши достижения

Это интересно

  1. Откройте в Internet Explorer файл index.htm.

hello_html_m1582dee7.png

  1. Щелкните ссылку Наша семья. Проследите по титулу, что открылась нужная страница.

  2. Щелкнуть ссылку Вернуться на главную страницу. Проследите по титулу, что вы вернулись на главную страницу. (index.htm)

  3. Проверьте работу ссылок Наша семья, Наши достижения, Это интересно.

Форматирование абзацев

Задание №3

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

Цель упражнения.

Изучение основ HTML

Освоение тегов форматирование абзацев.

Порядок выполнения.

  1. Запустите Блокнот и откройте файл peremena.htm.

  2. Дополните тело документа заголовком, для чего введите следующий текст

  1. Теперь ваш документ должен выглядеть так

Это интересно

Этот небольшой сайт посвящен семье Ивановых.

Вернуться на главную страницу

Наша семья

Наши достижения

  1. Сохраните файл.

  2. Проверьте как выглядит файл peremena.htm в браузере. hello_html_m2c82dc54.png

  3. Вернитесь в Блокнот, не закрывая Internet Explorer. Вставьте между заголовком Наши фотографии и ссылкой Вернуться на главную страницу текст, используя для перевода строки тег <br>

Примечание

Вы можете скопировать данный текст из файла Мой компьютер/ Класс1 на lcpd / Симонова / текст для сайта

  1. Между заголовком Наши фотографии и введенным текстом вставьте абзац, выровненный по правому краю

Семейные фотографии - это так здорово!
Наши родители

  1. Сохраните файл в Блокноте и проверьте как он теперь выглядит, переключившись в браузер и щелкнув по кнопке Обновить.

  2. Откройте в Блокноте файл index.htm

  3. Добавьте теги перевода строки<br>

Сайт семьи Ивановых

Этот небольшой сайт посвящен семье Ивановых.


Наша семья


Наши достижения


Это интересно

  1. Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.

Форматирование текста

Задание №4

В файле peremena.htm. выделите фрагменты текста полужирным, курсивным начертанием и цветом.

Цель упражнения.

Изучение основ HTML

Освоение тегов форматирования текста.

Порядок выполнения.

  1. Запустите Блокнот и откройте файл peremena.htm.

  2. Выделите эпиграф курсивом, указав в его начале и конце теги <i> и i>

Семейные фотографии - это так здорово!
Наши родители

  1. Выделите в основном тексте имя Мамы полужирным, указав в его начале и конце теги <b> и b>

<b> ИМЯ МАМЫb>

  1. Выделите синим цветом имена Бабушки и Дедушки, заключив их в пары тегов

<font color=”blue”>ИМЯ БАБУШКИ И ДЕДУШКИfont>

5. Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.

Форматирование текста

Работа со шрифтами

  1. В файле peremena.htm. выделите фрагменты текста полужирным, курсивным начертанием и цветом.

Цель упражнения.

Изучение основ HTML

Освоение тегов форматирования текста.

Порядок выполнения.

Написание текста полужирным, курсивным начертанием, верхним (нижним) индексом, цветом

  1. Запустите Блокнот и откройте файл peremena.htm.

  2. Дополните документ абзацем, оформленным курсивом, написанным справа

Марина занимается геометрией

  1. Дополнить документ абзацем с применением верхнего индекса

a2+b2=c2

  1. Теперь ваш документ должен выглядеть так

Это интересно

Этот небольшой сайт посвящен семье Ивановых.

Семейные фотографии - это так здорово!
Наши родители

Марина занимается геометрией

a2+b2=c2


Вернуться на главную страницу


Наша семья


Наши достижения

  1. Дополните документ абзацем с применением шрифта Tahoma

Пироги, которые испекла наша бабушка

  1. Теперь ваш документ должен выглядеть так

Это интересно

Этот небольшой сайт посвящен семье Ивановых.

Семейные фотографии - это так здорово!
Наши родители

Марина занимается геометрией

a2+b2=c2

Пироги, которые испекла наша бабушка


Вернуться на главную страницу


Наша семья


Наши достижения

  1. Измените

Семейные фотографии - это так здорово!
Наши родители

, применив к нему форматирование, увеличивающее размер букв и изменяющее цвет шрифта.

<p align=right> <i><font size = +2 color = green>Семейные фотографииfont> <font size = +3 color = blue>- это так здорово!font><br><font size = +4 color = red>Наши родителиfont>i>p>

8. Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.

Работа с изображением

Задание №5

Добавьте в файл peremena.htm портрет из файла Мой компьютер/ Класс1 на lcpd / Симонова / текст для сайта/фото ребенка, сопроводив его подписью, задав поля и выровняв по левому краю.

Цель упражнения.

Изучение основ HTML

Знакомство с тегом <img> и его атрибутами.

Порядок выполнения.

  1. Скопируйте файл Мой компьютер/ Класс1 на lcpd / Симонова / текст для сайта/фото ребенка в свою рабочую папку.

  2. Запустите Блокнот и откройте файл peremena.htm.

  3. Перед строкой <b> ИМЯ МАМЫb> добавьте рисунок

4. Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.

  1. Определите размеры рисунка в пикселах

    • Откройте свою рабочую папку

    • Щелкните правой кнопкой значок файла “foto.jpg”и в контекстном меню выберите Cвойства

    • В окне Свойства перейдите на вкладку Сводка. В разделе Изображение списка свойств найдите значения Ширина и Высота.

Примечание.

Вкладка Сводка может не содержать полный список свойств (см. рис выше.) В этом случае щелкните кнопку Подробно.

  1. Дополните тег<img> атрибутами размера, указав в качестве ширины и высоты значения своего рисунка

  1. Добавьте подпись к рисунку

<img src = “foto.jpg” width= “135” height = “160” alt – “фото ребенка”>

8. Сохраните файл в Блокноте. Обновите его в браузере. Наведите указатель мыши на рисунок и прочитайте надпись.

9.Выровняйте рисунок по правому краю, теперь текст будет обтекать его

фото ребенка” align = “left”>

10.Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.

  1. Добавьте вертикальные и горизонтальные поля к рисунку.

фото ребенка” align = “left” vspace = “8” hspace = “12”>

  1. Сохраните файл в Блокноте. Обновите его в браузере.

Работа с маркированными списками.

Создайте в файле dostihenia.htm маркированный список, перечислите некоторые достижения семьи

Изучение основ HTML

Знакомство с тегами маркированных списков <ul> и их атрибутами

  1. Запустите Блокнот и откройте файл dostihenia.htm.

  2. В теле документа перед ссылкой на главную страницу введите заголовок <h2>Достижения нашей семьиh2>

  3. Дополните документ маркированным списком (весь список помечается тегом <ul>, а каждый его пункт - тегом<li> )

Наша семья заняла 1 место в соревновании "Папа, мама, я- спортивная семья"

Наша семья приняла активное участие в соревновании "Вокруг света"

Мы первые в прыжках с парашютом!

Наша семья заняла 1 место в соревновании "Папа, мама, я- спортивная семья"

Наша семья приняла активное участие в соревновании "Вокруг света"

Мы первые в прыжках с парашютом!

Наша семья заняла 1 место в соревновании "Папа, мама, я- спортивная семья"

Наша семья приняла активное участие в соревновании "Вокруг света"

Мы первые в прыжках с парашютом!

  1. Теперь ваш документ должен выглядеть так

Наши достижения

HEAD>

<BODY>

Этот небольшой сайт посвящен семье Ивановых.

<h2>Достижения нашей семьиh2>

<ul>

<li>

Наша семья заняла 1 место в соревновании "Папа, мама, я- спортивная семья"

li>

<li>

Наша семья приняла активное участие в соревновании "Вокруг света"

li>

<li>

Мы первые в прыжках с парашютом!

<li>

Наша семья заняла 1 место в соревновании "Папа, мама, я- спортивная семья"

li>

<li>

Наша семья приняла активное участие в соревновании "Вокруг света"

li>

<li>

Мы первые в прыжках с парашютом!

<li>

Наша семья заняла 1 место в соревновании "Папа, мама, я- спортивная семья"

li>

<li>

Наша семья приняла активное участие в соревновании "Вокруг света"

li>

<li>

Мы первые в прыжках с парашютом!

li>

ul>

<br><a href="index.htm">Вернуться на главную страницуa>br>


Наша семья


Это интересно

HTML>

5. Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.

Работа с нумерованными списками.

Создайте в файле semya.htm нумерованный список, перечислите некоторые достижения семьи

Изучение основ HTML

Знакомство с тегами нумерованных списков <ol> и их атрибутами

  1. Запустите Блокнот и откройте файл semya.htm.

  2. В теле документа перед ссылкой на главную страницу введите заголовок <h2>Генеалогическое деревоh2>

  3. Дополните документ маркированным списком (весь список помечается тегом <ol>, а каждый его пункт - тегом<li> )

Иванов Петр Васильевич

Иванова Васса Александровна

Иванов Сергей Петрович

Иванова Светлана Петровна

Иванов Селивестр Васильевич

Иванова Оксана Сергеевна

Иванов Владислав Селиверствович

Иванова Юлия Селиверстовна

Иванов Станислав Васильевич

Иванова Татьяна Владимировна

Иванов Сергей Станиславович

Иванова Светлана Станиславовна

Иванов Сергей Васильевич

Иванова Ирина Петровна

Иванов Сергей Сергеевич

Иванова Ирина Сергеевна

Иванов Василий Васильевич

Иванова Людмила Игоревна

Иванов Сергей Станиславович

Иванова Светлана Станиславовна

Иванов Михаил Васильевич

Иванова Галина Викторовна

Иванов Петр Михайлович

Иванова Полина Михайловна

Иванов Ярослав Васильевич

Иванова Антонина Александровна

Иванов Михаил Ярославович

Иванова Яна Ярославовна

Иванов Владислав Васильевич

Иванова Лидия Ивановна

Иванов Станислав Владиславович

Иванова Ольга Владиславовна

  1. Теперь ваш документ должен выглядеть так

Наша семья

Этот небольшой сайт посвящен семье Ивановых.

Иванов Петр Васильевич

Иванова Васса Александровна

Иванов Сергей Петрович

Иванова Светлана Петровна

Иванов Селивестр Васильевич

Иванова Оксана Сергеевна

Иванов Владислав Селиверствович

Иванова Юлия Селиверстовна

Иванов Станислав Васильевич

Иванова Татьяна Владимировна

Иванов Сергей Станиславович

Иванова Светлана Станиславовна

Иванов Сергей Васильевич

Иванова Ирина Петровна

Иванов Сергей Сергеевич

Иванова Ирина Сергеевна

Иванов Василий Васильевич

Иванова Людмила Игоревна

Иванов Сергей Станиславович

Иванова Светлана Станиславовна

Иванов Михаил Васильевич

Иванова Галина Викторовна

Иванов Петр Михайлович

Иванова Полина Михайловна

Иванов Ярослав Васильевич

Иванова Антонина Александровна

Иванов Михаил Ярославович

Иванова Яна Ярославовна

Иванов Владислав Васильевич

Иванова Лидия Ивановна

Иванов Станислав Владиславович

Иванова Ольга Владиславовна


Вернуться на главную страницу


Наши достижения


Это интересно

Работа с многоуровневыми (вложенными) списками.

Создайте в файле index.htm нумерованный список, перечислите родственников семьи

Изучение основ HTML

Знакомство с тегами многоуровневыми (вложенными) списков <ol> и их атрибутами

  1. Запустите Блокнот и откройте файл semya.htm.

  2. В теле документа перед ссылкой на Наша семья введите заголовок <h2>Генеалогическое деревоh2>

  3. Дополните документ многоуровневыми (вложенными) списками (весь список помечается тегом <ol>, а каждый его пункт - тегом<li>

  4. Теперь ваш документ должен выглядеть так

Сайт семьи Ивановых

Этот небольшой сайт посвящен семье Ивановых.

Бабушка и Дедушка Иванов Петр Васильевич Иванова Васса Александровна Папа и Мама Иванов Сергей Петрович Иванова Светлана Петровна

Внуки

Иванов Юрий Сергеевич Иванова Полина Сергеевна


Наша семья


Наши достижения


Это интересно

Ссылка на адрес электронной почты

Задание №8

Создайте в файле index.htm ссылку на свою электронную почту.

Изучение основ HTML

Создайте ссылки на свою электронную почту.

  1. Запустите Блокнот и откройте файл index.htm.

  2. В теле документа перед закрытием тегов введите ссылку на свою электронную почту.
    Напишите автору

  3. Дополните документ ссылкой


Вопрос автору

  1. Теперь ваш документ должен выглядеть так

Сайт семьи Ивановых

Этот небольшой сайт посвящен семье Ивановых.


Наша семья


Наши достижения


Это интересно


Напишите автору


Вопрос автору

  1. Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.

Ссылки внутри WEB – страницы

Задание №9

Создайте в файле index.htm ссылку на свою электронную почту.

Изучение основ HTML

Создайте ссылок внутри WEB – страницы

  1. Запустите Блокнот и откройте файл index.htm.

  2. В теле документа перед закрытием тегов введите ссылки внутри WEB – страницы.
    Напишите автору

  3. Дополните документ ссылкой


Вопрос автору

  1. Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.

17

Симонова Т.А., учитель информатики МОУ «Лицей №3» г.Прохладный КБР

e-mail: simonof@list.ru

Разбираем HTML документ — Как создать сайт

Разбираем код HTML-документа

Урок №3
Разбираем HTML код

Давайте разберём, что означает каждая часть нашего кода HTML-документа, введённого в Блокнот на прошлом уроке:

<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h2>Заголовок статьи</h2>
  <p>
   Абзац статьи.</p>
 </body>
</html>

Но для начала узнаем, что такое HTML-тег или просто «тег»?

Тег — основа языка HTML

Основной частью языка HTML является — тег. HTML документ (как и весь html-код) и состоит и тегов. Тег содержит в себе имя и угловые скобки, которые расположены по бокам — <имяТега>:

<p> — это один из множества, различных HTML-тегов, означает абзац.

Теги бывают открывающими и закрывающими. У закрывающих тегов перед именем стоит косая черта (слэш) /

<p> — открывающий тег.
</p> — закрывающий тег.

Между открывающим и закрывающим тегами, обычно располагается текст или другие теги.

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

Рассмотрим другие теги используемые в нашем HTML коде.

Теги <html> </html> — начало и конец HTML-документа

Возвращаемся к нашему HTML документу:

<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h2>Заголовок статьи</h2>
  <p>
   Абзац статьи.</p>
 </body>
</html>

Каждый HTML-документ начинается с открывающегося тега <html> и заканчивается закрывающимся тегом </html>

Теги <head> </head> и <body> </body> — голова и тело HTML-документа

Между тегами <html> </html> располагаются два блока.
1. Первый блок начинается и заканчивается тегами <head> </head> — их называют головой HTML-документа.
2. Второй блок начинается и заканчивается тегами <body> </body> — их называют телом HTML-документа.

<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h2>Заголовок статьи</h2>
  <p>
   Абзац статьи.</p>
 </body>
</html>

1. <head> </head> — голова HTML-документа.
2. <body> </body> — тело HTML-документа, между этими тегами располагается основная информация страницы: заголовки, абзацы, фотографии, ссылки, кнопки и т.д.

Теги <title> </title> — название HTML-страницы

<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h2>Заголовок статьи</h2>
  <p>
   Абзац статьи.</p>
 </body>
</html>

В голове между тегами <head> </head>, располагаются теги
<title> </title>. Между тегами <title> </title> помещают текст, который выступает в качестве названия страницы.

В нашем примере, между тегами <title> </title>, находится текст:
Название страницы

Текст помещённый между тегами <title> </title> появляется в двух местах, в виде названия окна браузера и в виде названия вкладки браузера:

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

Теги <h2> </h2> и <p> </p> — заголовок и абзац статьи

<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h2>Заголовок статьи</h2>
  <p>
   Абзац статьи.</p>
 </body>
</html>

В теле нашего HTML-документа, между тегами <body> </body>, располагаются два вида тегов:
<h2> </h2> — теги заголовока статьи,
<p> </p> — теги абзаца статьи.

<h2> </h2> — между этими тегами располагается текст, который является заголовком статьи.
Например, текст заголовока статьи, которую вы сейчас читаете содержит следующее:
Разбираем HTML код

<p> </p> — между этими тегами располагается текст, который является абзацем статьи.
Например, второй абзац статьи, которую вы сейчас читаете, содержит следующее:
Но для начала узнаем, что такое HTML-тег или просто «тег»?

Обобщаем материал по структуре HTML-документа:

Каждый HTML-документ начинается и заканчивается тегами <html> </html> Каждый HTML-документ состоит из двух блоков, головы и тела:
1. <head> </head> — голова HTML-документа,
2. <body> </body> — тело HTML-документа.

В голове HTML-документа между тегами <head> </head>, располагаются теги <title> </title> и некоторая служебная информация о странице (мета-теги), которую мы изучим чуть позже.

В теле HTML-документа между тегами <body> </body>, располагается основной контент: тексты, изображения, формы, которые обрамлены тегами заголовков h2, абзацев p, изображений img, ссылок a, кнопок input и т.д.

Читать далее: Добавляем статью в HTML-документ


Дата публикации поста: 3 апреля 2019

Дата обновления поста: 15 октября 2014


Навигация по записям

Немного о том, как создать файл HTML

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

Определение

как создать файл htmlОтвечать на вопрос о том, как создать файл HTML, начнем с определения. Такой материал представляет собой обычный текстовый документ, однако в нем с помощью специальных дескрипторов можно задать расположение элементов содержания страницы относительно отдельных объектов либо окна браузера. При этом просмотреть результат можно посредством интернет-обозревателя.

Для того чтобы отредактировать HTML-код, можно использовать текстовый редактор или подобрать специальные программы, имеющие функции автоматического ввода и подсветки синтаксиса. Отметим, что примером приложения, которое хорошо подходит для эффективной работы с указанными документами, стал Sublime Text.

Во время использования редактора кода выберите в основном меню приложения пункт «Файл», а после этого «Сохранить как...». Далее в возникшем диалоговом окне следует указать директорию, в которой будет сохранен файл HTML, а также его имя и точное расширение. Таким образом, формат легко сменить.

Можно отконвертировать текстовый документ, превратив его в HTML-страницу, просто дописывая в конце названия расширение .html. Следует помнить о том, что существует ряд определенных ситуаций, при которых даже верно созданный файл, имеющий правильный формат, в браузере не открывается. Причиной тому может стать неверное оформление структуры HTML-кода.

Правила

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

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

Исключением выступает <DOCTYPE!>. Если говорить о том, как создать файл HTML, важно знать, что одноименный дескриптор является обязательным для материалов такого типа. При этом такое обозначение нельзя использовать на правах тега более 1-го раза на странице. С помощью особых обозначений <head> и </head> указывается информация относительно документа.

Отметим, что между данными тегами с помощью дескрипторов <title> и </title> следует задавать заголовок веб-страницы. В свою очередь, посредством <link> можно подключить файлы JavaScript или CSS.

Аналогично внутри параметра <head> приводятся тип документа, кодировка, стили, версии оформления в разных браузерах, а также ряд других параметров. Хотя содержимое тега и не отображается браузером, данный дескриптор обязателен.

Основа

файл htmlТег совместно с заключает в себе тело сайта - информацию, которая отображается на экране пользователя. Речь может идти о заголовках, подзаголовках, параграфах и строках текста, изображениях, видео или других объектах мультимедиа. При этом указанный дескриптор обязателен.

Внутри могут быть применены другие элементы: <footer>, <article> или <header>. Хотя они и не влияют непосредственно на отображаемый в браузере результат, однако создают структуру кода HTML, это принято считать хорошим тоном среди web-разработчиков и верстальщиков.

Блокнот под рукой

как создать файл html в блокнотеСейчас мы рассмотрим, как создать файл HTML в "Блокноте". Именно с разработки страниц HTML в этом приложении начинали обучение сайтостроению все веб-программисты. Вы также можете освоить такую несложную науку. Заполнять "Блокнот" информацией следует, основываясь на советах, которые были приведены ранее, то есть изучить значение тегов, расставить их в нужных местах, заполнить содержимым.

Превратить "Блокнот" в HTML-страницу очень просто, как это сделать, мы уже описывали. Таким образом, вы ознакомились с основами процесса, и, возможно, согласитесь, что создать файл HTML не очень сложно.

Урок №1. Структура Html-документа

Урок №1. Структура Html-документа

Details
Автор Super User

В данной статье описана структура простейшей html-страницы. Статья состоит из двух частей - теория и пошаговая инструкция по созданию первой страницы. В качестве самостоятельной работы предлагается создать страницу по заданному образцу.

HTML – язык гипертекстовой разметки. Данный формат определяет внешний вид документа, взаимное расположение текстовой, графической и мультимедийной информации.

Основу html-документа составляет текстовый документ, который можно набрать в любом текстовом редакторе. Созданный файл нужно сохранить с расширением *.html.

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

Основные теги:

Весь код страницы помещается внутрь тегов <html>..</html>

Html-документ, как правило, имеет заголовок, размещенный в тегах <head>..</head>

В заголовке может быть указан титул документа, т.е. его название в заголовке окна браузера. Титул заключается в теги <title>..</title>

Также в заголовке часто указывается дополнительная информация в теге <meta> (кодировка, ключевые слова для поисковых машин, информация об авторе и т.д.). Например, тег <meta http-equiv="content-type" content="text/html; charset=windows-1251"> предназначен для определения кодировки, с помощью которой была написана страница.

Содержимое страницы заключается в теги <body>..</body>

Пример
 <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=windows-1251">
        <title> 
            Это html-документ 
        </title>
    </head>
    <body>
        Это моя первая страница
    </body>
</html>
Задание

Скопируйте приведенный выше код в текстовый редактор Блокнот. Сохраните страницу с расширением html. Для этого поле «Тип файла» (1)  укажите «Все файлы», в поле «Имя файла» (2) - имя_файла.html. Привыкайте давать страницам латинские названия, желательно еще не использовать пробелы. Обычно главную страницу сайта называют index.html.

Страница, соответствующая примеру, выглядит следующим образом:
 

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

Атрибуты тега <body>:

Тег <body> имеет ряд необязательных атрибутов. Атрибуты записываются внутри открывающего тега через пробел:

background – фоновое изображение, на котором отображается текст документа.

Пример:

<body background=”fish.jpg”>- относительная адресация, изображение должно быть сохранено там же, где и html-страница.
<body background=”images/fish.jpg”> - относительная адресация, изображение должно быть сохранено в папке images, папка - там же, где и html-страница (наиболее удобный способ).
<body background=”c:/images /fish.jpg”> - абсолютная адресация, изображение должно быть сохранено по адресу c:/images, независимо от места хранения html-страницы.

bgcolor – задает цвет фона.

Пример:

<body bgcolor=red> - содержимое страницы будет отображаться на красном фоне.
<body bgcolor=#FF0000> - содержимое страницы будет отображаться на красном фоне.

Цвет можно указать либо в виде строковой константы (таблицы с цветами можно найти в интернете или воспользоваться такой шпаргалкой), либо в виде 6-разрядного 16-ричного числа, каждые два разряда которого определяют цвет палитры RGB (#FF0000 – красный, #00FF00 – зеленый, #0000FF – синий, #000000 – черный,  #FFFFFF – белый и т.д.).

text – задает цвет текста.

link – задает цвет гиперссылки (по умолчанию – синий).

vlink– задает цвет пройденной гиперссылки (по умолчанию – фиолетовый).

Задание

Создайте html-страницу, соответствующую образцу. В качестве фона используйте файл key.jpg.

 

Добавить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *