Основы HTML. Создание html страницы в блокноте: разъяснения для чайников Скачать готовую веб страницу html по информатике

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

В этом уроке курса MM часть 1 мы сделаем 2-страничный сайт...например, о заработке в интернете.

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

Вверху сайта мы сделаем "шапку сайта". Слева будет меню сайта с ссылками на другие страницы сайта, остальное место будет занимать контент (содержимое) сайта.

Идея понятна? Приступаем.

Запускаем Блокнот и пишем наш минимальный набор для создания страницы .

Теперь напишем между тегами название нашей страницы, например, вот так

Далее разместим теги

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

Для создания каркаса страницы мы будем использовать таблицу, но чуть более хитрую, чем мы проходили в HTML-уроке о таблицах . Нам нужна таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2 ячейки, т.е. вот такая нам нужна таблица:

В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке 3 будет содержимое страницы.

Для того чтобы сделать такую таблицу, напишите вот такой код

Т.е. код нашей страницы будет вот такой:

Как видите, в такой вот "хитрой" таблице используется лишь 1 пара тегов в первой строке таблицы, а не два, как при построении таблицы 2х2. Но зато появился параметр colspan="2". Этот параметр как бы говорит, какого размера должна быть ячейка. В данном случае ячейка должна быть шириной в 2 ячейки.

Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 750 пикселей. Из расчета, что кто-то из посетителей сайта может использовать монитор 800х600 точек, и просматривать более широкий сайт ему будет некомфортно.

Высоту таблицы сделаем 600 пикселей

Т.е. код нашей страницы теперь будет вот такой.

Здесь у нас будет шапка
Здесь будет меню

Чтобы стало видно границы частей сайта - "зальем" область меню и область шапки цветом. Например, вот так

Здесь у нас будет шапка
Здесь будет меню	Здесь будет содержимое страницы

Сохраните файл под именем index.html , для того чтобы его можно было просмотреть, как он будет выглядеть в браузере.

Теперь вставляем картинку шапки в наш сайт. О том, .

Здесь будет меню	Здесь будет содержимое страницы

Теперь установим точные размеры ячейки таблицы, предназначенной для шапки. Т.к. картинка шапки у нас имеет размер 750х120, то и размер ячейки таблицы сделаем 750 х 120.

Здесь будет меню	Здесь будет содержимое страницы

ТАК .

Установим ширину меню равной 200 пикселей, для этого добавим width="200" в соответствующий тег

Здесь будет меню	Здесь будет содержимое страницы

Задний план меню "зальем" вот таким фоном, для этого сохраните этот фон с его "родным" именем sv11.jpg в ту же директорию, где находится файл страницы.

А теперь прописываем нужный код

Здесь будет меню	Здесь будет содержимое страницы

Теперь наша страница будет выглядеть ТАК .

У вас, возможно, возник вопрос, почему браузер не "отрабатывает" ширину меню 200? Меню ведь выглядит шире, чем 200 пикселей. Да. Есть такой глюк браузера, но все встанет на свои места, если начать писать текст в основном разделе страницы. (Или можно задать жестко ширину ячейки, в которой будем писать контент, дописав width="550" )

Чтобы подтвердить это, добавим текста на наш сайт.

Здесь будет меню

Теперь все почти ОК...Почти, потому что налицо небольшие проблемки. Текст отображается ровно посередине (по вертикали), а следовало бы, чтобы текст был расположен вверху ячеек.

Для этого нам надо прописать еще один параметр в теге меню и основного содержимого страницы.

Этот параметр мы не проходили в уроке о таблицах , - это параметр выравнивания по вертикали valign="top".

Значение top означает, что содержимое будет располагаться вверху.

Здесь будет меню	Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.

Теперь наша страница будет выглядеть ТАК .

Главная	Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.

Теперь надо сделать текст меню в виде ссылок. Слово Главная залинкуем на страницу index.html, а слово Ссылки на страницу ssilki.html, которую мы создадим чуть позже.

Главная Ссылки	Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.

Теперь наш сайт будет выглядеть ТАК .

Осталось сделать вторую страницу сайта. Для того чтобы упростить работу, сделаем так - сохраним нашу страницу index.html под другим именем ssilki.html, а затем подредактируем файл.

Т.е. на компьютере у вас должно быть 2 пока что одинаковых страницы - index.html и ssilki.html.

Теперь изменим название страницы (между тегами ), и изменим текст страницы, например, вот так

Главная	На этой странице будут размещены ссылки на сайты о заработке в интернете Сайт о заработке в интернете MoneyMaster

Вторая страница сайта будет выглядеть ТАК.

Возможно, у кого-то возник вопрос. А почему столько много пустых строк, нельзя ли уплотнить код?

Можно. Я сделал пропуски, чтобы было наглядней видно структуру страницы. А так можно разместить весь код вообще в одну строчку
Но не стоит. Иначе будет трудно искать ошибки, если что...

Если есть какие либо вопросы по этому примеру - пишите .

Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить в интернете.

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

Для того, чтобы ваш сайт был доступен из интернет всему миру, надо найти , который предоставит вам место для вашего сайта. Хостинг бывает бесплатный и платный. Бесплатный хостинг дает вам также и адрес сайта. Так например, если вы зарегистрировались на хостинге narod.ru, указав при регистрации логин pupkin, то адрес вашего сайта будет http://pupkin.narod.ru Но бесплатные хостинги обладают кучей недостатков и их следует использовать лишь для тренировки. Если же делать серьезный сайт, то надо покупать и покупать хостинг, затем связать домен и хостинг (подробнее эти вопросы рассматриваются в книге MoneyMaster-3), тогда ваш сайт будет иметь желаемый вами адрес типа http://gadukino.ru (если домен не занят), и вы получите еще кучу преимуществ по сравнению с бесплатным хостингом, например, возможность использовать скрипты, что позволит вам создавать динамические сайты. После того как вы определились с хостингом и получили место для вашего сайта, надо перебросить файлы сайта на хостинг. Сделать это можно с помощью специальных FTP- программ, например LeapFTP, CuteFTP, или можно сделать с помощью файловых оболочек Windows Commander, Total Commander и др. можете скачать видео-урок, из которого вы узнаете, как сделать переброску файлов на хостинг.

ПОЗДРАВЛЯЮ!

Если вы дошли до этого момента и у вас все получилось, значит, вы прошли своего рода тест-драйв и теперь с уверенностью можете двигаться дальше.

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

А вы хотели бы научиться рисовать сами графический дизайн вашего сайта?

Этому вы можете научиться, пройдя обучение по книге MM-2.

Книга MM часть 2. УЖЕ СЕГОДНЯ вы сможете сделать СВОЙ приличный, эксклюзивный дизайн для вашего сайта , не теряя недели/месяцы на изучение учебников и прочих материалов, не воруя дизайн у других и не используя темплейты. ДАЖЕ ЕСЛИ ВЫ В ПРИНЦИПЕ НЕ ДИЗАЙНЕР - У ВАС ВСЕ РАВНО ПОЛУЧИТСЯ ПРИЛИЧНЫЙ ДИЗАЙН! Как сделать красивый сайт, даже если вы пока не дизайнер. Обучение необходимым навыкам и приемам для создания графических элементов сайта. Разновидности дизайна. Основы композиции сайта. Рекоммендуемые сочетания цветов. Создание макета сайта в Adobe Photoshop. Эффекты в Adobe Photoshop. Нарезка сайта в Image Ready. Верстка кода в DreamWeaver. Таблицы стилей CSS.

К сожалению, книга 2 не бесплатная, но я уверен, что вы не пожалеете о ее покупке. Наверняка до прочтения книги MM-1 вы и представить не могли, что, изучив ее, вы научитесь создавать простенькие сайты. Скорей всего, вам это казалось чем то очень сложным, "не для вашего ума". Но я вас провел по самой короткой дорожке к результату, держа вас как ребенка за руку. Точно так же, изучив MM-2, вы научитесь делать графический дизайн сайта, при этом, опять же пройдя по самой короткой дорожке, т.е. СЭКОНОМИВ ВРЕМЯ, не тратя месяцы на изучение различных книг. Потратив несколько вечеров на изучение MM-2, вы будете в силах делать свой дизайн для своих сайтов, значительно обогнав тех, кто решит купить книги в обычном магазине и будет месяцами их изучать.

Цена на книгу MM-2 также включает в себя цену на консультации. Да.
Каждый покупатель получает право на консультации в соответствующих закрытых разделах форума. Наверняка у вас будут появляться вопросы, а спросить некого. Покупая книгу - вы всегда будете иметь возможность задать вопросы и получить на них ответы от меня или от опытных учеников! При таком подходе ваше обучение будет максимально эффективным! При таком подходе вы максимально быстро научитесь делать сайты и зарабатывать с их помощью.

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

Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.

Описание html тегов из примера

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

Любая html страница имеет следующую структуру:

... Заголовочные теги ... ... Тело страницы ...

2. - между этими тегами заключается весь видимый контент страницы.

4. - между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег

Создать страницу проще, чем вы думаете

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



Простой код позволяет сделать текст красным

Написать жирным не намного сложнее

Мы дошли до самого низа

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

Ну вот и все. Ваша первая страница готова

Файл нужно назвать index.html . Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.

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

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

Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center » и вставим строчку, в которой содержится слово «Color ». Кстати, я уже писал. Это очень просто, рекомендую к прочтению.

Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5

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

Видите, заголовок стал красным. Точно также вы можете придать нужный оттенок любой части текста.

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

Пока страничку видите только вы. Но согласитесь, таким сайтом можно удивить только человека из железного века. Но это первый опыт, давайте сделаем его еще более успешным, разобравшись с тегами, которые мы использовали. Это поможет вам научиться создавать свои проекты, без чьей либо помощи.

Теги

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

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

Основные

Начинается и заканчивается страница с тегов . Они показывают браузеру, что это веб-документ, созданный при помощи html.

Далее идет или заголовок. В ней располагается самая важная информация о странице, в нашем случае – . Если вы еще не нашли фразу «Моя первая страница», которая присутствует в коде, обратите внимание на саму вкладку, над поисковой строчкой.

Именно теги отвечают за начало и конец основной информации о страничке.

Тег

указывает на то, что фраза является заголовком. По умолчанию, она чуть больше основного текста и выделяется жирным. Если бы мы с вами сейчас писали не только на html, но и создавали CSS-файл, с которым перекликался наш файл, то могли бы управлять размерами, шрифтом и даже цветом всех заголовков на странице, не прописывая font style , как мы это делали в примере. Хотя об этом тоже рановато.

Кстати, Title и H1 имеют свое влияние во время присваивания вашему сайту места в поисковой выдаче. Относиться к ним нужно с большим вниманием и не писать внутри лишь бы что. Они имеют отношение к . Помимо h1, существуют еще и h2, h3,h4.

В этой же строчке есть открывающийся и закрывающийся

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

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

Картинка

Далее идет тег img , то есть image, картинка. Квадратная скобка открывается, в нее вписывается вся основная информация о изображении, только после этого она закрывается. Надо отметить, что img – это тег, а все остальные элементы кода, которые вписываются внутрь, это его атрибуты.

Первым делом идет alt , то есть описание. Это также необходимо для оптимизации. Иногда добавляется еще и title . При наведении на изображение мышью рядом с курсором появляется подсказка, когда страница уже открыта в браузере.

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

В теге src прописывается путь к картинке. Именно он указывает браузеру, что дальше нужно двигаться, чтобы найти нужное изображение, а в каком направлении искать – пишете вы сами.

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

отвечает за придание части текста какого-то особого стиля, к примеру, как в нашем случае другого цвета. style=»color:red» показывает, что цвет будет красным. Если хотите желтый, напишите yellow, зеленый – green. Можно пользоваться кодами цветов из фотошопа.

помогает выделить текст жирным.

---

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

---

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

Ссылки

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

После того как основная часть страницы написана, вы закрываете тег body , так как тело закончено. И указываете на то, что прекращаете на сегодня использовать html .

Если вы хотите больше узнать о тегах html и научиться вставлять не только картинки, но и видео, создавать кнопки, различные формы, списки, параграфы, то я могу предложить вам бесплатный курс Евгения Попова «Основы html ». Всего 33 урока помогут вам выйти на новый уровень.

Ещё хочу порекомендовать вам Видеокурс, который рассказывает, как верстаются сайты. Весь процесс показан на реальных примерах, что особенно хорошо. Курс предназначен как для новичков, которые ещё даже HTML не знают, так и для тех, кто уже хорошо знает и HTML, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup

Помимо этого заберите Бесплатную книгу по созданию сайтов ! Эта книга рассчитана на начинающих, и вот там создаётся сайт ОТ и ДО. То есть готовится дизайн, затем верстаются страницы, пишется программная часть, а после сайт размещается в Интернете. Автор тщательно всё комментирует, а в книге очень много скриншотов и иллюстраций. Причём особенностью книги является то, что создаётся не какой-то абстрактный сайт, а вполне реальный и существующий в Интернете.

Сегодня вы сделали много, ведь первый шаг самый сложный.

Подписывайтесь на рассылку и группу ВКонтакте , и узнавайте еще: как и зачем нужен движок сайта, что такое блочная верстка и модульная сетка, как правильно писать сайты и многое другое.

До новых встреч и удачи!

В примерной программе по информатике и ИКТ на тему “Коммуникационные технологии” отводится всего 12 часов и предлагается создать Web-страничку с использованием шаблонов. На тему “Мультимедийные технологии” выделяется 8 часов, но если в образовательном учреждении информатика изучается на пропедевтическом уровне уже в 5, 6 и 7 классах, то целесообразно перенести изучение мультимедийных технологий в пропедевтический курс и тогда можно увеличить время на изучение коммуникационных технологий, а точнее, можно добавить тему “Создание Web-сайтов на языке HTML” в 8 классе.

Освоение технологии создания сайтов рекомендуется начать с языка разметки гипертекста HTML в программе Блокнот, что является первоосновой в данном направлении. Конечно, за 8 часов невозможно изучить весь язык HTML, но можно показать назначение и применение основных тегов языка. Если ученик заинтересуется технологией создания сайтов, то сможет продолжить изучение материала самостоятельно или на соответствующих курсах, кружках или факультативах.

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

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

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

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

Основные цели обучения: формирование познавательного интереса, развитие интеллектуальных и творческих способностей в области Web-технологий.

Обучающие:

• сформировать систему знаний по технологии создания Web-сайтов;
• обучить языку разметки гипертекста HTML для создания сайтов;
• познакомить с этапами проектной деятельности.

Развивающие:

• развить творческие способности к самовыражению, посредством создания сайтов;
• сформировать умение сопоставлять, искать аналог и осуществлять перенос знаний в новую предметную область Web-технологий;
• развить навыки работы на компьютере

Воспитательные:

• воспитать добросовестное отношение к работе;
• воспитать чувства товарищества и личной ответственности за созданный сайт;
• воспитать художественный и эстетический вкус;
• воспитать грамотного и корректного пользователя сети Интернет.

Урок 1

1. Общие сведения о Web-сайтах и языке HTML

Публикации во Всемирной паутине (World Wide Web)реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц, объединённых гиперссылками. Web-страницы могут содержать текст, рисунки, таблицы, мультимедийные и динамические объекты. Создание Web-сайтов можно осуществлять с помощью языка HTML.

HTML – Hyper Text Markup Language - язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера. HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Теги заключаются в угловые скобки <>… и бывают парные и непарные (одиночные <>).

Документ HTML – это текстовый файл с расширением.html или.htm , содержащий набор тегов.

Браузер – (browser) – программа для просмотра Web-страниц. Широко используют бразеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.

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

3. Форматирование символов

Символы, заключенные между следующими тегами отображают:

Параметры шрифта

Текст, заключенный между тегами …….. имеет заданный размер, цвет и гарнитуру. Для этого используются атрибуты: SIZE = значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), каждому цвету соответствует свой шестнадцатеричный код от 000000 до FFFFFF.

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

Одиночный тег
разрывает текстовый поток и вставляет пустую строку. Несколько таких тегов добавляют несколько пустых строк. Межстрочный интервал – одинарный.

4. Практическое задание №1 .

Создание первого HTML-документа “Драматические театры Санкт-Петербурга”, работа со шрифтами, задание цвета и размера шрифта. Освоение технологии работы.

Урок №2

1. Форматирование текста по абзацам

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

Выравнивание текста по абзацам:

2. Задание цвета всего текста и фона документа

Описываются в начальном теге тела документа

TEXT =цвет текста >.

3. Заголовки разных уровней

Тегами …. оформляют заключенный в них текст. Значения n меняются от 1 до 6, при этом текст выводится от более крупного к более мелкому. Теги …. могут иметь атрибуты ALIGN=CENTER, LEFT, RIGHT.

4. Простые списки

5. Практичекое задание №2

Форматирование текста по абзацам, цвет фона, заголовки разных уровней, списки.

Урок №3

1. Вставка графических изображений

Всеми браузерами поддерживаются форматы .gif , .jpg. Эти форматы являются растровыми. GIF – поддерживается прозрачность и анимацияю, хорошо подходит для рисованных изображений. JPG – для полноцветных изображений, хорошо подходит для отсканированных изображений и фотографий, анимацию не поддерживает.

Одиночный тег вставляет графические изображения в текстовый поток в любом месте:

>

Необязательные атрибуты тега :

Чтобы рисунок был по центру, можно использовать тег

……./

2. Практическое задание №3

Вставка и форматирование графических изображений. Самостятельное создание Web-страниц драматических театров.

Урок №4

Связь с другими документами организуется тегами <A>….

> текст гиперссылки .

>< IMG SRC =’имя графического файла’>

2. Практическое задание №4

Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров.

Урок №5

1. Таблицы

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

С помощью таблиц удобно создавать навигацию по сайту.

Пример таблицы из двух строк (рядов), содержащих по две ячейки:

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

Основные атрибуты тегов

и

задают параметры таблицы, строки или ячейки: ALIGN=left, right, center – выравнивание ( , , ) BGCOLOR=’цвет’ – фоновый цвет ( , , ) HSPACE=значение – свободное пространство слева и справа от таблицы в пикселах ( ) VSPACE=значение - свободное пространство сверху и снизу от таблицы в пикселах ( ) WIDTH=значение – ширина таблицы (ячейки) – в пикселах, или в процентах ( , ) HEIGHT= значение – высоты таблицы (ячейки, строки) – в пикселах, или в процентах ( , ) BORDER= значение – толщина рамки вокруг таблицы и ее ячеек, по умолчанию значение=1, если значение=0, то рамки нет ( , , , ) BORDECOLOR=’цвет’ – цет рамки (>) VALIGH=bottom, middle, top – выравнивание содержимого по вертикали ( ) 2. Практичекое задание №5 Создание навигации по сайту в форме таблицы из одной строки Уроки №6 и №7 1. Секция заголовка , мета-теги В секции заголовка на каждой странице указывается информация о документе, которая используется при его отображении. Текст, заключенный между тегами , отображается в заголовке окна браузера. В секции заголовка обычно помещается и ряд тегов с различными атрибутами, предоставляющими дополнительную информацию (метаинформацию) о Web-сайте: > - - (указывается тип кодовой таблицы (windows-1251 , Koi8-R и другие), использованной при подготовке текстовой части документа. - информация об тегов HTML – 15 минут. 2. Рефлексия. Представление проекта и оценивание его учениками класса и учителем – 30 минут. Вопросы контрольного теста – Приложение 2 . Литература для учителя Томас А.Пауэл “Web-дизайн. Наиболее полное руководство. В подлинике”, 2-е издание, БХВ-СПБ, 2005 г. Браун М. “HTML 3.2. Наиболее полное руководство. В подлиннике”, БХВ-СПб, 1999 Захаркина В.В. “Основы создания Web-страниц”, методическое пособие, СПБ, 2000 г. К.Ахметов, “Microsoft Internet Explorer 4.0 для всех”, изд-во Компьютер, Москва, 1997 г. Литература для ученика Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2004 г. Смирнова И. “Начала Web-дизайна, Санкт-Петербург, БХВ, 2004г. Перечень Internet-ресурсов http://htmlbook.ru - Мержевич Влад. Краткий, но информационно насыщенный учебник по технологии создания сайтов, HTML, CSS, дизайну, графике и др. http://html.manual.ru - Городулин Владимир. HTML-справочник. http://winchanger.narod.ru - А. Климов. Краткий справочник по тегам HTML-языка. Понравилась статья? Поделись с друзьями: Facebook Twitter Мой мир Вконтакте Google+ 05.04.2020 Интернет Самое интересное: Обозначь каждый многоугольник измерь длины сторон каждого Подключаем YouTube к телевизору Названия больших чисел Решение составной задачи Друзья, я использую файлы Cookies для наилучшего представления своего сайта. Если Вы согласны, нажмите "Ок".Ок