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

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

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

Изучение HTML языка - раздел Программирование, Введение Рад, Что Вы Решил...

Введение

Рад, что вы решили приступить к изучению моего учебника по html. Поверьте мне, в нем нет ничего сложного, и уже через час вы создадите свою первую страничку.
HTML– это язык разметки документов в среде WEB. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы браузер правильно отображал форматирование к примеру текста т.е. разделял его на абзацы, выделял цитаты, заголовки, списки и.т.д. ему надо как-то сообщить , что мол это заголовок, а это – параграф и.т.д. Этим как раз и занимается язык html.
Чтобы увидеть HTML-коды страницы в Internet, кликните правой кнопкой мыши по странице, в выпавшем меню выберите пункт - view source (или "просмотр HTML кода"). Не пугайтесь! Я еще раз повторюсь – на самом деле, все очень просто!

Что понадобится нам для обучения?

Браузер и Блокнот(или аналогичный простой редактор) - вот всё, что вам необходимо для работы с данным учебником . Раз вы просматриваете эту страничку – значит браузер у вас уже есть , ну а блокнот я думаю найти не составит труда ( Пуск – Программы - Стандартные - Блокнот).

Почему простой текстовый редактор идеально подходит для изучения HTML и CSS? да потому, что он не изменяет вводимый вами код. Так вы быстро продвинетесь, а ошибки будут только вашими, а не программными.

Возможно вы уже слышали, или даже использовали такие программы, как Microsoft FrontPage, Adobe Dreamweaver, которые упрощают работу с кодом.
Пока что забудьте об этих программах! пока учимся в блокноте!

Да, без сомнений Мы будем ими пользоваться, но только после того, как пройдем коротенькие курсы по html и css . Потом просто скачаете у меня на сайте специальный видео-курс по Adobe Dreamweaver и будет вам счастье…

Весь ли здесь HTML ?

Я постарался собрать только ту часть языка, которая действительно используется(из личного опыта создания более 10 сайтов), потому как более чем 40% используется очень редко.Тем более, в дальнейшем мы будем пользоваться Adobe Dreamweaver, и весь труднозапоминающийся код он напишет за нас . Главу по фреймам я выкинул полностью, советую Вам вообще никогда ими не пользоваться, т.к. это уже очень устаревшая технология и рейтинга это Вам не добавит!

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

Термина используемые по ходу обучения

Приведу пример : <h1> Крупный заголовок </h1> <h2> Заголовок чуть поменьше… В браузере это будет выглядеть следующим образом:

. . .

</body>
<!--закончили с телом документа-->

</html>

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

 

Примечание: тег <!-- --> внутри элемента TITLE не действует.


 

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

ШАГ 1: Создайте на своем компьютере папку с названием вашего будущего сайта, ну к примеру в данном случае актуально будет назвать папку… Пока поверьте мне на слово, дальше когда начнете изучать Dreamweaver все поймете.

Как видите текст содержащийся в элементе DIV выделился в отдельную строку!

  SPAN - Используется для выделения части информации и придания ей различных… Например:

HR-служит для вставки в текст горизонтальной линии. Закрывающего тега нет!

WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера. SIZE – толщина линии в пикселах. ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: left – выравнивание…

Урок 6: Покоряем html ссылки

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

Создать html ссылку очень просто. Для этого используется простенький элемент с одним атрибутом. Ну вот например:

<a href="http://www.zvirec.com">Это ссылка на сайт zvirec.com </a>

будет выглядеть в браузере:

Это ссылка на сайт zvirec.com

Элемент а (ancor) является как бы якорем, т.е. текст, заключенный между открывающим <a> и закрывающим </a> тегом , будет текстом ссылки.
Атрибут href это сокращение от "hypertext reference/гипертекстовая ссылка", специфирует место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.

 

Если нужно сделать ссылку между собственными страницами?

Сделать html ссылку между страницами одного и того же веб-сайта гораздо проще. Например, если у нас есть две страницы(к примеру page1.htm и… <a href="page2.htm">Для перехода на page2 щелкни здесь!… Т.е. надо просто написать название страницы, на которую мы хотим перейти.

А если надо сделать ссылку внутри страницы?

Бывают случаи когда необходимо сделать ссылку с начала страницы в конец или наоборот, или к примеру с оглавления на главы и.т.д. Сделать ее очень… <!-- этот способ используется при маркировании заголовков --><h2… Теперь вы можете ссылаться на помеченную область(в данном случае Раздел1) простым указанием ее имени после значка #. …

Оглавление

Раздел 1: как стать богатым
Раздел 2: как стать счастливым
Раздел 3: как быть здоровым

Раздел 1: как стать богатым

Для того чтобы стать богатым необходимо очень много трудится .....

Раздел 2: как стать счастливым

Для того чтобы стать счастливым, нужно использовать каждую минуту...

Раздел3: как быть здоровым

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

 

А можно сделать ссылку на почту?

<a href="mailto:admin@zvirec.com">Написать письмо админу zvirec.com</a> В браузере будет выглядеть: Написать письмо админу zvirec.com

А можно ли изменить цвет ссылок?

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

LINK - цвет просто ссылок.

ALINK(Active Link) - цвет активных ссылок (активная означает в момент нажатия на нее)

VLINK(Visited Link) - цвет уже посещенных ссылок

Все цвета задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

К примеру если при открытии тела документа, элементу body прописать:

<body link="red" vlink="green" alink="white">

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

А если нужно чтобы в каком -то месте ссылка имела другой цвет? например по всему документу красные, а именно в одном месте зеленая?

Тогда нужно внутри html ссылки прописать уже знакомый элемент font с атрибутом цвета:

<a href="http://www.zvirec.com"><font color="black">Черная ссылка</font></a>

Если сделать так, то данная ссылка будет черной.


 

Урок 7: Работаем с изображениями

· GIF (Graphics Interchange Format) · JPG / JPEG (Joint Photographic Experts Group) · PNG (Portable Network Graphics)

А есть ещё атрибуты, которые нам необходимы?

<img src="pchela1.jpg" alt="пчела мая!!!" width="65" height="59"> В результате увидим:

А как можно изображение сделать ссылкой?

Для этого просто вместо текста ссылки, вставляете изображение. Вот например:

<a href="http://www.zvirec.com">
<img src="pchela.jpg" width="65" height="59" title="Пчела мая!!! "border="0" >
</a>

Вот результат:

Что еще за border="0" спросите Вы, а дело в том, что когда делаешь изображение ссылкой, вокруг него появляется некрасивая рамка(border) и чтобы ее убрать пишут дополнительный атрибут border .

Ну вот впринципе и все с изображениями, как видите ничего сложного нет.


 

Урок 8: Цвет фона и текста

Вот необходимые атрибуты: BACKGROUND – определяет изображение для "заливки" фона. Значение… BGCOLOR – определяет цвет фона документа.

Урок 9: Разберемся с таблицами в html

Html таблицы - полезная штука . Обычно их используют не только для отображения таблиц как таковых, но и для создания невидимого каркаса страницы, помогающего расположить текст и изображения должным образом. Раньше все сайты имели табличную структуру, сейчас все большую популярность приобретает структура на дивах (с помощью <div> и CSS ). Вот классический пример табличной структуры:

 

Шапка сайта(логотип и все такое)
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
Ссылка 5
Основное содержание Реклама и все такое
Блок копирайта

 

Давайте разбираться как построить простейшую таблицу. Для этого нам понадобятся как минимум три элемента .

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

TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен.

TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.

 

Давайте попробуем создать таблицу из двух рядов и двух столбцов:

<table border="1">
<tr>
<td>ряд 1 ячейка1</td> <td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

Вот как это будет выглядеть в браузере:

ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2

Разобрались? Т.е. таблица начинается с <table>, затем идёт <tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки: <td>ряд 1 ячейка1</td> и <td>ряд1 ячейка2</td>. Ряд закрывается </tr>, и сразу начинается новый ряд <tr>. В новом ряду также две ячейки. Таблица закрывается </table>. Все довольно логично

 

А как можно объединить ячейки?

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

Урок 10: Что такое html формы и зачем они нужны.

Что такое html формы? Вот смотрите, ниже приведена html форма заказа обучающего диска. По окончании обучения, вы тоже сможете сделать такую. Начало формы Введите ФИО:

Урок 11: Заканчиваем разбираться с формами

<form name="primer6" method="post" action="obrabotchik.php"> <p>Выберите способ доставки:</p>… Результат: Выберите способ доставки:

Урок 12: Смотрим форму в действии

Будем тестировать вот такую форму. Введите ФИО: Введите пароль:

Урок 13: Пару слов про голову документа

В первом уроке я говорил, что голова документа открывается тегом <HEAD> и закрывается тегом </HEAD> . Какие основные элементы содержатся… Ну во-первых это название документа - элемент TITLE . У этого элемента… Информация из элемента TITLE показывается в окне браузера(вверху слева), и поэтому это очень важный и информативный…

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

Используемые теги: Изучение, HTML, языка0.066

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

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

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

Еще рефераты, курсовые, дипломные работы на эту тему:

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

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

Два объекта истории русского языка: живой язык диалектный и литературный язык
Новые общественные функции приобретает русский язык по мере сложения новой исторической общности советского народа он становится межнациональным... Современный период... Горшкова Хабургаев ИГРЯ...

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

Языковой материал для немецкого языка
Аспирация согласных p , t , k .Ассимиляция по глухости.Ударение и мелодика в немецком предложении. Ритмнемецкой речи. Ударение словесное, фразовое,… Отличие фонетического строя немецкого языка отфонетического строя русского… Склонение им н существительных.АртикльАртикль - служебное слово. Понятие о происхожденииартикля. Определ нный и…

Языковой материал для испанского языка
Понятие о смысловой группе. Полныеи редуцированные формы служебных слов. Различное произношение союза y.Интонация полного перечисления. Понятие о… Число единственное и множественное. Падеж общий ипритяжательный.АртикльАртикль… Роль прилагательных.Число. Усеч ннаяформа некоторых прилагательных grande, bueno, malo. Стилистическая рольположения…

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

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

Изучение конструкций и команд языка PL/SQL
На сайте allrefs.net читайте: "Изучение конструкций и команд языка PL/SQL"

Реализация языкового процессора оператора FOR языка BASIC

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