рефераты конспекты курсовые дипломные лекции шпоры

Реферат Курсовая Конспект

Урок 2: Создаем свою первую страничку

Урок 2: Создаем свою первую страничку - раздел Программирование, Изучение HTML языка Давайте Сразу Учиться Все Делать Правильно. Хоть Это И Самая Примитивная Стра...

Давайте сразу учиться все делать правильно. Хоть это и самая примитивная страничка создадим ее по всем правилам(они пригодятся при работе с Adobe Dreamweaver).

ШАГ 1:
Создайте на своем компьютере папку с названием вашего будущего сайта, ну к примеру в данном случае актуально будет назвать папку obuchenie_html . Внутри папки создайте еще одну папку с названием www, а внутри нее еще одну для изображений с названием img (позже вставим туда картинки). Для наглядности я нарисовал вам приблизительную структуру, получившуюся в результате:

Пока поверьте мне на слово, дальше когда начнете изучать Dreamweaver все поймете.

ШАГ 2:
Зайдите в созданную на предыдущем шаге папку www и создайте внутри нее текстовый документ. Для этого зайдите в нее, кликните правой кнопкой мыши в выпадающем меню выберите Создать - Текстовый документ. Перед собой вы должны видеть примерно следующее:


ШАГ 3:
Теперь, следуя предыдущему уроку напишите в Блокноте текст простейшей странички:

Приведу пример:

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

<html>
<head>

<title> Это моя первая страничка!</title>

</head>

<body>

<!--сейчас я напишу свою первую строчку текста!-->
Ура!!!! Я создал свою первую страницу на html!!!

</body>

</html>

Готово ! Вы создали свою первую настоящую веб-страницу!

ШАГ 4:
Теперь сохраните ваш документ как "index.htm" (расширение ".htm" указывает, что это HTML-документ. ".html" даст тот же результат. Это не имеет значения).Для этого в меню Файл выберите Сохранить Как:

В пунктеТип файлавыберите "Все файлы".
После сохранения можете удалить текстовый документ.

ШАГ 5:
Теперь если вы запустите получившийся файл index.htm увидите примерно следующее:

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

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

Как видите действительно в заголовке документа написано "Это моя первая страничка!" а комментарии действительно не отобразились в браузере!

Дело осталось за малым! Научиться форматировать текст, таблицы и.т.п.


 

Урок 3: Работаем с текстом

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

Если вы возьмете и скопируете текст данного урока от начала и до первой картинки, и вставите его в свою первую страничку, то вы увидите примерно следующее:

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

Основными элементами форматирования текста в html являются:

- P Используется для разбивания текста на параграфы
-H1,H2,...H6 Применяются для создания заголовков 1,2...6 уровней
- BR Используетcя для переноса строки
- DIV ,SPAN Используются для выделения части документа определенным способом.

 

P -используется для разметки параграфов в html документах.

Атрибуты:

ALIGN - определяет способ горизонтального выравнивания параграфа .
Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине .По умолчанию имеет значениеleft.

Приведу пример:

Если внутри тела документа написать следующее:

<p align="center"> Этот параграф по центру </p>
<p align="left">Этот по левому краю</p>
<p >
Этот тоже по левому (т.к. по умолчанию) </p>
<p align="right">Этот по правому краю</p>
<p align="justify">В этом параграфе текст будет выравниваться по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю</p>

То при просмотре в браузере получим следующее:

 

Примечание: следите чтобы содержимое в кавычках было написано без пробелов, т.е. <p align="right"> а не <p align=" right "> иначе не будет работать!

 

↑ Наверх ↑

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

Атрибуты:

ALIGN - определяет способ горизонтального выравнивания заголовков.
Возможные значения: left, center, right.По умолчанию - left.

Приведу пример:

Если внутри тела документа написать следующее:

<!-- примеры заголовков от 1 до 6 уровня-->

<h1> Большой заголовок </h1>
<h2> Заголовок поменьше</h2>
<h3> Еще меньше</h3>
<h4>Совсем маленький </h4>
<h5> Малюсенький заголовочек </h5>
<h6> Ну просто лилипутский заголовочек</h6>

То при просмотре в браузере увидим:

Примечание: закрывающий тег обязателен!

↑ Наверх ↑

 

BR -данный элемент осуществляет перенос строки. Не имеет закрывающего тега.

Приведу пример:

Если внутри тела документа написать следующее:

Начинается первая строка <br>
теперь идет вторая <br>
а вот уже и третья
<p>
А это параграф и внутри него тоже можно использовать тег <br>переноса строки.Его надо использовать всегда, когда надо перенести строку:)</p>

Увидим следующее:

 

Как вы наверное заметили, при переносе строки не начинается новый параграф! Перенос- он и есть перенос!

↑ Наверх ↑

DIV -В современном сайтостроении используется как удобный контейнер для блоков html кода страницы, которым легко динамически манипулировать – перемещать, регулировать отступы, скрывать и т.п. Обязателен закрывающий тег!

Атрибуты:

ALIGN - определяет способ горизонтального выравнивания контейнера.
Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине .По умолчанию имеет значение left.

 

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

<div align="right">
Начинается первая строка <br> теперь идет вторая <br>
</div>

а вот уже и третья
<p>
А это параграф и внутри него тоже можно использовать тег <br> переноса строки.Его надо использовать всегда, когда надо перенести строку:)</p>

Что мы увидим:

 

Т.е. мы взяли две строчки кода, заключили их в контейнер DIV и выравняли его по правому краю! Так же само, можно заключить в контейнер и 20 и 50 и более строчек и манипулировать ими.

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

Например:

Пока что вы читаете текст на первой строке <div> Но теперь уже на второй</div> А теперь уже на третей

Результат:

– Конец работы –

Эта тема принадлежит разделу:

Изучение HTML языка

Рад что вы решили приступить к изучению моего учебника по html Поверьте мне в нем нет ничего сложного и уже через час вы создадите свою первую.. Что понадобится нам для обучения.. Браузер и Блокнот или аналогичный простой редактор вот вс что вам необходимо для работы с данным учебником Раз..

Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Урок 2: Создаем свою первую страничку

Что будем делать с полученным материалом:

Если этот материал оказался полезным ля Вас, Вы можете сохранить его на свою страничку в социальных сетях:

Все темы данного раздела:

Термина используемые по ходу обучения
Тег – оформленная единица HTML-кода. Например, <html >, <body>,<h1>,<h2> и так далее. Все тэги имеют одинаковый формат: они начинаются знаком "<&quo

Как видите текст содержащийся в элементе DIV выделился в отдельную строку!
↑ Наверх ↑   SPAN - Используется для выделения части и

HR-служит для вставки в текст горизонтальной линии. Закрывающего тега нет!
Атрибуты: WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера. SIZE – толщина линии в пикселах.

Если нужно сделать ссылку между собственными страницами?
  Сделать html ссылку между страницами одного и того же веб-сайта гораздо проще. Например, если у нас есть две страницы(к примеру page1.htm и page2.htm

А если надо сделать ссылку внутри страницы?
  Бывают случаи когда необходимо сделать ссылку с начала страницы в конец или наоборот, или к примеру с оглавления на главы и.т.д. Сделать ее очень просто! Необходимо пометить место д

А можно сделать ссылку на почту?
Конечно можно. Вот пример ссылки на е-mail сайта zvirec.com . <a href="mailto:admin@zvirec.com">Написать письмо админу zvirec.com</a>

Урок 7: Работаем с изображениями
Изображения - это неотъемлемая часть любого сайта в сети интернет. Они используются везде, поэтому давайте разберемся что к чему. Есть три типа файлов изображений, которые можно вставить на ваши ст

А есть ещё атрибуты, которые нам необходимы?
Вот еще пара полезных атрибутов - ALT и TITLE . ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен

Урок 8: Цвет фона и текста
Мы уже знаем как менять цвет текста, но для этого нам нужно было заключать его в теги font ,а это не всегда удобно. Иногда, лучше задать цвет текста для всего документа. Также, мож

А как можно объединить ячейки?
  Для этого существуют данные атрибуты. COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1. ROWSPAN – опр

Урок 10: Что такое html формы и зачем они нужны.
Html формы - это наверное самая сложная часть языка html. Так что наберитесь терпения и давайте потихоньку начинать. Что такое html формы? Вот смотрите, ниже приведена html форма заказа об

Урок 11: Заканчиваем разбираться с формами
Нам осталось разобрать три элемента формы. Давайте по-порядку: <form name="primer6" method="post" action="obrabotchik.php"> <p>Выберите способ

Урок 12: Смотрим форму в действии
В этом уроке я, как и обещал, дам вам простейший обработчик и расскажу как протестировать форму. Будем тестировать вот такую форму. Введите ФИО: Введите пароль:

Урок 13: Пару слов про голову документа
Все это время мы говорили про тело документа и уже научились делать свои страницы. Поговорим теперь про голову документа. В первом уроке я говорил, что голова документа открывается те

Хотите получать на электронную почту самые свежие новости?
Education Insider Sample
Подпишитесь на Нашу рассылку
Наша политика приватности обеспечивает 100% безопасность и анонимность Ваших E-Mail
Реклама
Соответствующий теме материал
  • Похожее
  • Популярное
  • Облако тегов
  • Здесь
  • Временно
  • Пусто
Теги