Similar presentations:
Структура Web-сайта
1.
Структура Web-сайтаСоздаем страничку в программе
Блокнот
2. Контейнеры
Код страницы <HTML></HTML>
Заголовок <HEAD></HEAD>
Название Web-страницы <TITLE></TITLE>
Основное содержание страницы <BODY></BODY>
3. Назовем Web-страницу «Компьютер»
<HEAD><TITLE> Компьютер</TITLE>
</HEAD>
4. Поместим на страницу текст «Все о компьютерах»
<BODY>Все о компьютерах
</BODY>
5. Текст программы:
<HTML><HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
Все о компьютерах
</BODY>
</HTML>
6. Сохранять Web-страницы нужно с расширением .html
Например, Мой сайт .htmlПринято сохранять титульный файл сайта под
именем
Index.html
Сохраните, откройте в любом браузере
7. Форматирование текста:
Размер шрифта в заголовках задается тэгами от Н1 до Н6:<H1>
Все о компьютерах
</H1>
Тип выравнивания заголовка задает атрибут ALIGN
<H1 ALIGN="CENTER”>Все о компьютерах
</H1>
Тэг FONT задает параметры форматирования любого
фрагмента текста. Атрибут FACE задает тип шрифта
(FACE=“Arial”) SIZE – размер (SIZE=10) COLOR – цвет
(COLOR=“blue”)
Для отделения заголовка от остального содержания
страницы горизонтальной линией используется тэг <HR>
Задать синий цвет заголовка:
<FONT COLOR=“BLUE">
<H1 ALIGN="CENTER”>
Все о компьютерах
</H1>
</FONT>
8. Абзацы:
Разделение текста на абзацы производитсяконтейнером <P></P>. Для каждого абзаца можно
применить свой тип выравнивания. Поместим на
титульную страницу текст, разбитый на абзацы с
различным выравниванием:
<P ALIGN="LEFT">На этом сайте вы сможете
получить различную информацию о
компьютере, его программном обеспечении и
ценах на компьютерные комплектующие.</P>
<P ALIGN="RIGHT">Терминологический словарь
познакомит вас с компьютерными терминами,
а также вы сможете заполнить анкету.</P>
9. Программирование Web-сайта
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
<FONT COLOR="GREEN">
<H1 ALIGN="CENTER”>
Все о компьютерах
</H1>
</FONT>
<HR>
<P ALIGN="LEFT">На этом сайте вы сможете получить различную
информацию о компьютере, его программном обеспечении и ценах на
компьютерные комплектующие.</P>
</H1>
</FONT>
<HR>
<P ALIGN="RIGHT">Терминологический словарь познакомит вас с
компьютерными терминами, а также вы сможете заполнить анкету.</P>
</BODY>
</HTML>
10.
По образцу создать страничку, содержащую сведенияоб авторе: фио, класс, школа, увлечения. Прислать в
ЭЖ файл с расширением html.
Например: Иванов.html