Знакомство с css

Раздаточные Материалы

Разметка и эскиз первой html-страницы

1. 
   Откройте приложение Macromedia Homesite
   
2. 
   Создайте новую HTML-страницу.
   
3. 
   Создайте заголовок первого уровня (тег 

   ) и «отцентрируйте» его.
   

Пример:
Выполнение практического задания № 1 по HTML

4. 
   Создайте маркированный (
   ) и нумерованный (
   ) списки.
   

Пример:
Виды операционных систем:

1. 
   Unix
   
2. 
   Linux
   
3. 
   FreeBSD
   
4. 
   OS/2
   
5. 
   MacOS
   
6. 
   VMSP5
   
7. 
   SunOS
   
8. 
   VMESA
   
9. 
   Windows
   

Активный контент:

1. 
   Java
   
2. 
   ActiveX
   
3. 
   JavaScript
   
4. 
   VBScript
   
5. 
   Action Script
   
6. 
   Coockies
   

• 
  Создайте гипертекстовую ссылку (тег  ) с последнего пункта нумерованного списка.
  

Пример:

9. 
   Windows
   

2. 
   Поместите изображение на страницу (тег  ).
   

Пример:

3. 
   Сделайте размещенное изображение ссылкой (тег  ).
   

Пример:

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

Пример:

Актриса Дарья Сагалова

5. 
   Сделайте задний фон страницы светло-желтым __ (#FFFFD9), 
   цвет непосещенных ссылок – красным __ (#FF0000), 
   посещенных – синим __ (#0000FF).
   
6. 
   В нумерованном списке текст пункта 4 сделайте жирным (теги  и   ), 
   а пункта 5 - курсивным (наклонным) (теги   и   ).
   

Пример:

• 
  VBScript
  
• 
  Action Script
  

2. 
   Оформите в абзац (тег 
   ) текст, предстваленный ниже. Словосочетание «гипертекстовая ссылка» оформите зеленым цветом (#008000) __
   

Пример:
Что такое гипертекстовая ссылка (или, как чаще говорят, просто ссылка)?
С помощью ссылки устанавливается связь с другим (или с тем же) документом. Ссылкой может быть фрагмент текста или изображение. По умолчанию текстовая ссылка подчеркнута. При подведении курсора мыши к гипертекстовой ссылке он превращается в раскрытую ладонь. При нажатии на ссылку браузер обращается к серверу, запрашивая документ, который указан в html-теге ссылки.

3. 
   Создайте абсолютную ссылку на сайт www.mail.ru
   

Пример:
Для поиска информации воспользуйтесь поисковой машиной www.mail.ru

4. 
   Сохраните страницу в личной папке в файл firstpage.html
   

Создание первого web-сайта с тремя html-страницами

1. 
   Откройте приложение Macromedia Homesite
   
2. 
   Создайте три Web-страницы. Первая страница будет домашней, поэтому переименуйте её в index.html (ещё одно допустимое название – default.html).
   
3. 
   Создайте домашнюю страницу, назвав её «Рабочее место Web–мастера». Эта страница обязательно должна содержать ссылки на две другие страницы, посвящённые Html-редакторам и графическим редакторам.
   
4. 
   Вторая страница посвящена HTML редактору Macromedia Home Site 5. На этой странице есть следующие ссылки:
   
   1. 
      Две ссылки на Интернет-сайты производителей Macromedia Home Site 5(http://www.macromedia.com/ и http://www.allaire.com).
      
   2. 
      Ссылка-рисунок, при нажатии на которую в браузер загружается картинка с изображением интерфейса программы (картинка загружается в отдельном окне: target="blank").
      
   3. 
      Ссылка для возвращения на домашнюю страницу.
      

5. 
   На третьей странице рассказывается о размещении изображениях на страницах. Третья страница содержит:
   
   1. 
      Cсылку-рисунок, при нажатии на которую в браузер загружается картинка с изображением интерфейса программы Adobe Photoshop (картинка загружается в отдельном окне: target="blank")
      
   2. 
      Cсылку на домашнюю страницу.
      

6. 
   Сохраните страницу в личной папке.
   

Размещение таблиц на html-странице. Форматирование текста в таблице

1. 
   Откройте приложение Macromedia Homesite
   
2. 
   Создайте новую HTML-страницу.
   
3. 
   Создайте новую Web-страницу. Разместите на странице таблицу.
   Ширина таблицы = 90%, высота = 600 пикселей.
   Высота рядов = 200 пикселей.
   Ширина колонок = 30%
   Выполните форматирование текста в таблице, как показано в примере 3.1
   

Пример 3.1:

В таблице могут использоваться следующие способы выравнивания: