Создание Web-страниц с помощью HTML (часть 1)
материал по информатике и икт (9 класс)

Опубликовано 17.10.2023 - 22:06 - Хисматуллин Ильнур
Создание Web-страниц с помощью HTML (часть 1)
 
Использованная литература:
1) Алленова Наталья "HTML - Первые шаги". Учебник (руководство) по HTML.
2) Е.Н.Новоселова "Создание Web-страниц с помощью HTML". Журнал "Информатика и образование" №11, 12 - 2004 г., №1-3, 5 - 2005 г.

Скачать:

ВложениеРазмер
Microsoft Office document icon 22_html_1.doc75.5 КБ

Предварительный просмотр:

Информатика                                                                                                                                                     HTML

① Откроем текстовый редактор Блокнот.



</span><span class="c0">Мой первый шаг</span><span class="c3"> 


Здравствуйте, это моя первая страница.


Добро пожаловать! 

А теперь сохраним этот документ, присвоив ему имя, например index.html

Html не является языком программирования, он предназначен для разметки текстовых документов (т.е. для форматирования текста).

🢩  Этот тэг должен открывать документ.  

🢩  > - голова документа
🢩  - тело документа (непосредственное содержание документа)

🢩  - заголовок.</span></p><p class="c2"><span class="c7">🢩</span><span class="c3"> <br> - принудительный перенос строки (перенос текста на другую строку, что-то вроде </span><span class="c0">Enter</span><span class="c3">.) <br> не требуют закрывающего тэга.</span></p><p class="c2"><span class="c3">  </span></p><ul class="c36 lst-kix_list_3-0 start"><li class="c2 c46 li-bullet-0"><span class="c3">clear="all" (left, right) - завершение обтекания текстом объекта (картинки). </span></li></ul><p class="c2 c11"><span class="c3"></span></p><p class="c2"><span class="c17">Пример.</span></p><p class="c2"><span class="c4"><IMG SRC="images/damir.gif" BORDER=0 HEIGHT=60 WIDTH=60 HSPACE=2 VSPACE=2 ALIGN=LEFT >     Галиахметов Дамир Мулланурович   </span><span class="c0"><BR clear="left"></span><span class="c4"> директор Нижнекуюкской средней общеобразовательной школы.<BR></span></p><p class="c2 c11"><span class="c3"></span></p><p class="c2"><span class="c6">②</span></p><a id="t.e85bc3873514caa54c0b98fa4275e2ba8c225972"></a><a id="t.1"></a><table class="c23"><tr class="c12"><td class="c40" colspan="1" rowspan="1"><p class="c2"><span class="c3">Давайте окрасим слова </span><span class="c0">Добро пожаловать!</span><span class="c3"> в </span><span class="c17">красный</span><span class="c3"> цвет.</span></p></td><td class="c29" colspan="1" rowspan="1"><p class="c2"><span class="c3"><br><br><font </span><span class="c0">color="#CC0000"</span><span class="c3">> Добро пожаловать! </font><br></body></span></p><p class="c2 c11"><span class="c3"></span></p></td></tr></table><p class="c2 c11"><span class="c3"></span></p><p class="c2"><span class="c6">③</span></p><p class="c2"><span class="c7">🢩</span><span class="c3"> Тэг <font></font> - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта.</span></p><p class="c2 c11"><span class="c3"></span></p><p class="c2"><span class="c6">④</span></p><a id="t.46d6110111fdbd52400a2376316a3e5642051994"></a><a id="t.2"></a><table class="c23"><tr class="c12"><td class="c18" colspan="1" rowspan="1"><p class="c2"><span class="c3">Как задавать </span><span class="c27">цвет текста</span><span class="c3"> в документе?</span></p><p class="c2"><span class="c3"><body </span><span class="c0">text="#336699"></span><span class="c3"> <br><br>Это значит, что весь текст страницы будет </span><span class="c17">синим</span><span class="c3">, кроме текста, для которого мы специально прописали <font></font> (если цвет в <body> не задавать, то по умолчанию он будет </span><span class="c17">черным</span><span class="c3">).</span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c2"><span class="c3"><body </span><span class="c0">text="#336699"></span><span class="c3"><br>Здравствуйте, это моя первая страница.<br><br><br></span></p><p class="c2"><span class="c3"><font color="#CC0000"> Добро пожаловать! </font> <br></span></p><p class="c2"><span class="c3"></body></span></p></td></tr></table><p class="c2 c11"><span class="c3"></span></p><p class="c2 c11"><span class="c3"></span></p><p class="c2 c11"><span class="c3"></span></p><p class="c2 c11"><span class="c3"></span></p><p class="c2"><span class="c6">⑤</span></p><a id="t.63e4fd20fa5f031f5b692a758a855ca880a05b7b"></a><a id="t.3"></a><table class="c23"><tr class="c12"><td class="c18" colspan="1" rowspan="1"><p class="c2"><span class="c27">Цвет фона</span><span class="c3"> устанавливается в уже нам знакомом тэге <body>: <br><br><body </span><span class="c0">bgcolor="#000000"</span><span class="c3">>    (</span><span class="c17">черный</span><span class="c3"> цвет)</span></p><p class="c2 c11"><span class="c5"></span></p><p class="c2 c11"><span class="c5"></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c2"><span class="c3"><body text="#336699" </span><span class="c0">bgcolor="#000000</span><span class="c3">"><br>Здравствуйте, это моя первая страница.<br><br></span></p><p class="c2 c11"><span class="c3"></span></p></td></tr></table><p class="c2 c11"><span class="c3"></span></p><p class="c2"><span class="c17">Обратите внимание:</span><span class="c3"> мы одновременно можем прописать в теге <body> и </span><span class="c26">цвет текста</span><span class="c3"> в документе, и </span><span class="c26">цвет фона</span><span class="c3">.</span></p><p class="c2 c11"><span class="c22"></span></p><p class="c2"><span class="c6">⑥</span></p><p class="c2"><span class="c7">🢩</span><span class="c3"> Параграфы вводятся тэгом: <p></p> </span></p><a id="t.7558564b1057026c3e2d4de946709eb755892ed3"></a><a id="t.4"></a><table class="c23"><tr class="c12"><td class="c18" colspan="1" rowspan="1"><p class="c2"><span class="c1">⮲</span><span class="c3"> С помощью параграфов мы можем </span><span class="c26">центрировать текст</span><span class="c3">: <br><br><p align="</span><span class="c0">center</span><span class="c3">"> текст </p> <br><br></span><span class="c1">⮲</span><span class="c3"> С помощью параграфов мы можем выровнять текст </span><span class="c26">по левому краю</span><span class="c3">: <br><br><p align="</span><span class="c0">left</span><span class="c3">"> текст </p> <br><br></span><span class="c1">⮲</span><span class="c3"> Или </span><span class="c26">по правому краю</span><span class="c3"> документа: <br><br><p align="</span><span class="c0">right</span><span class="c3">"> текст </p></span></p><p class="c2 c11"><span class="c3"></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c2"><span class="c3"><html><br><head><br><title>Мой первый шаг



Здравствуйте, это моя первая страница.


Добро пожаловать!



Существует и четвертое значение:


⮲ 

justify">текст

(он выравнивает текст по обоим краям документа)

⑦

Мы научимся выделять текст при помощи заголовков и узнаем еще одну функцию тэга .

🢩 В HTML предусмотрено шесть уровней заголовков, которые задаются при помощи парных тегов от

до

. Заголовок первого уровня  

…

- самый крупный, все остальные, соответственно, все мельче и мельче.

Пример.

 Здравствуйте, это моя первая страница. 

Заголовки предназначены для выделения небольшой части текста (строки, фразы), но, если вы хотите выделить большой фрагмент текста, или только одно слово, при этом без переноса строки, то как быть? С заголовками такое не пройдет, поэтому вспомним о тэге .

⑧

🢩 Тэг - многофункционален. Им может задаваться не только цвет текста (COLOR) в конкретной части документа, но и размер шрифта (SIZE), и вид шрифта (FACE).

⮲ Параметр SIZE задает размер шрифта в условных единицах (от 1 до 7).

Пример.

SIZE=1>  текст  

⮲ Атрибут FACE служит для задания гарнитуры шрифта текста. Названий гарнитур шрифтов можно указать несколько (через запятую). Если название шрифта состоит из нескольких слов, то его нужно заключить в кавычки.

Примеры.

⮚ FACE= "Monotype Corsiva "> текст

⮚ FACE= Impact  > текст

⮚ FACE= "Courier New" > текст

⮚ FACE= Arial > текст

⑨

Теперь настала пора поговорить о том как делается курсив, подчеркнутый текст, полужирный текст:

🢩  Полужирный текст
🢩  Наклонный текст (курсив)
🢩  Подчеркнутый текст

К одному фрагменту текста может применяться сразу несколько тэгов:

Пример.
  текст  

⑩

Как вставлять картинки в документ?

🢩 

Пример.

<IMG SRC="shcola.gif" BORDER=2 HEIGHT=84 WIDTH=131 HSPACE=2 VSPACE=2 ALIGN=LEFT  ALT="Фото школы">

        

Нижнекуюкская средняя общеобразовательная школа

🕮

 - рисунок

⮲ border="2" - рамка вокруг самой картинки (в пикселях). Можно не задавать.

⮲ width="131" - ширина картинки (в пикселях)

⮲ height="84" - высота картинки (в пикселях)

⮲ align="left" - расположение текста по отношению к картинке (right, top (вверху), middle (посередине), left, bottom (внизу картинки))

⮲ vspace="2" - расстояние от картинки до текста по вертикали

⮲ hspace="2" - расстояние от картинки до текста по горизонтали

⮲ alt="описание" - описание картинки

Параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд выскочит описание картинки. Если параметр alt не задавать, описания не будет.

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

Пример.
http://www.homepage.ru/my/my.jpg">

①①

Картинку можно сделать фоном документа. Это прописывается в открывающем тэге body.

Примеры.

⮚ background="fon1.gif">

⮚ BACKGROUND="fon2.gif">

Параметр Background и указывает на то, где лежит фоновая картинка (наша фоновая картинка лежит в той же папке, что и документ).

Но зачем оставлять параметр bgcolor, если есть background? А вдруг фоновая картинка не загрузится.

①②

Палитра цветов

Название

Русское название

Код

aqua

бирюзовый

#00FFFF

black

черный

#000000

blue

синий

#00FFFF

fuchsia

лиловый

#FF00FF

gray

серый

#808080

green

зеленый

#008000

lime

светло-зеленый

#00FF00

maroon

малиновый

#800000

navy

темно-синий

#000080

olive

оливковый

#808000

purple

фиолетовый

#800080

red

красный

#FF0000

silver

серебристый

#C0C0C0

teal

сизый

#008080

white

белый

#FFFFFF

yellow

желтый

#FFFF00

 стр.

Нижнекуюкская ООШ, 2022/2023 учебный год.


По теме: методические разработки, презентации и конспекты

Создание Web-страниц средствами языка HTML

Методическая разработка к уроку "Создание Web-страниц средствами языка HTML"...

Методическая разработка открытого урока по дисциплине «Интернет-технологии» Тема: Создание простой Web-страницы на языке HTML.

Актуальность выбранной темы открытого урока заключается в необходимости  владения навыками создания web-документов, учитывая, что в настоящее время очень развиты Интернет коммуникации. Необходимо...

Сценарий 2 уроков по созданию web-странички с помощью HTML

Сценарий 2 уроков по созданию web-странички с помощью HTML для 8 класса и раздаточные материалы....

Создание Web-страницы с помощью языка HTML

Конспект урока для 8 класса по теме "Создание Web-страницы с помощью языка HTML"...

Создание Web-страницы с помощью языка HTML. Практическое задание

Практическое задание для 8 класса по теме "Создание Web-страницы с помощью языка HTML"...

Создание Web-страниц с помощью HTML (часть 2)

Создание Web-страниц с помощью HTML (часть 2) Использованная литература:1) Алленова Наталья "HTML - Первые шаги". Учебник (руководство) по HTML.2) Е.Н.Новоселова "Создание Web-стра...

Создание Web-страниц с помощью HTML (часть 3)

Создание Web-страниц с помощью HTML (часть 3) Использованная литература:1) Алленова Наталья "HTML - Первые шаги". Учебник (руководство) по HTML.2) Е.Н.Новоселова "Создание Web-стра...