Презентация "Основы HTML и CSS. Введение и основные понятия"
Подписи к слайдам:
Основы HTML и CSS
Введение и основные понятия
Введение и основные понятия:
Дополнительно
- Основные сведения о языках разметки: HTML, XML, XHTML. Эволюция языков разметки. Цели и задачи языка HTML
- Что такое WEB-сервер, web-сайт, web-страница и чем они отличаются
- Что такое тег? Типы элементов. Понятие тегов и атрибутов
- Структура и правила оформления HTML-документа.
- Основные элементы форматирования текста. Элементы блочной (block) и текстовой (inline) разметки
- 1986
- ISO-8879
- SGML
- 1991
- CERN
- HTML
- 1994
- Подготовка HTML 2.0
- Консорциум W3 (W3C)
- www.W3.org
- март 1995
- начало работы над HTML 3 + CSS
- январь 1997
- HTML 3.2
- декабрь 1997
- HTML 4.0 + CSS 2.0
- 24 декабря 1999
- HTML 4.01
- 2000
- XHTML 1.0
- 2010 год
- HTML 5.0
- ещё в разработке
- 22 января 2008 года
- W3C официально объявил "HTML 5 - в разработке"
- Первый браузер NCSA Mosaic – также основа для NN и IE
- Netscape Navigator (Netscape Communications) 15.12.1994
- Netscape Navigator 9 (движок Firefox 2) – 2008 последняя версия
- Internet Explorer 1.0 (Microsoft) 1995
- Internet Explorer 3.0 (Microsoft) 1996 («война браузеров»)
- Internet Explorer 6.0 (Microsoft) 2001
- Internet Explorer 7.0 (Microsoft) 2006
- Internet Explorer 8.0 (Microsoft) 19.03.2009
- Opera (Opera Software ASA) 30.08.1995
- Opera 9.0 (Opera Software ASA) 2006
- Opera 10.2 (Opera Software ASA) 2009
- Mozilla Firefox 1 (Mozilla Foundation) 9.11.2004
- Mozilla Firefox 3.0.3 (Mozilla Foundation) 2008
- Mozilla Firefox 3.6 (Mozilla Foundation) 21.01.2010
- Google Chrome 1 (Google) 10.12.2008
- Google Chrome 4 (Google) 25.01.2010
- Safari 4 (Apple) 11.08.2009
- Web-сайт
- Web-сервер
- Web-адрес
- Web-страница
- *.html
- *.html
- *.html
- ...
- 1
- 2
- 3
- 4
- 1
- 3
- 2
- 4
- 2 1
- 5
- 4 3
- WWW
- index.html
- HTML
- PHP
- CGI
- ASP
- ...
- HTML
- веб-сервер
- jpg, gif, swf,
- avi, mpg …
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>Пример HTML страницы</title>
- </head>
- <body>
- <h1>Мой первый HTML-документ</h1>
- <hr>
- <p>Скоро мы узнаем, что означают эти странные знаки.</p>
- </body>
- </html>
- тег
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Строгое DTD. Документы, использующие такое объявление типа документа, включают в себя все элементы и атрибуты, не являющиеся нежелательными и не использующие фреймы.
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> Документы, использующие такое объявление типа документа, включают все, что включено в строгое DTD, а также нежелательные элементы и атрибуты, относящиеся к визуальному оформлению.
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset // EN" "http://www.w3.org/TR/html4/frameset.dtd"> Документы, использующие такое объявление типа документа, включает все, что включено в предыдущее DTD, а также фреймы.
- http://validator.w3.org/
- http://jigsaw.w3.org/css-validator/
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- Здесь размещается служебная информация. Пользователь ее не видит.
- </head>
- <body>
- Здесь размещается содержание документа. Именно это видит пользователь.
- </body>
- </html>
- Начало документа
- Конец документа
- Начало заголовка
- Конец заголовка
- Начало тела документа
- Конец тела документа
- Определение типа документа
- <html>
- <head>
- <title> Заголовок документа </title>
- </head>
- <body>
- ...Содержание документа...
- </body>
- </html>
- <html>
- <head>
- ...Служебная информация...
- </head>
- <body>
- <h1>Мой первый HTML документ</h1> <hr> <!-- горизонтальная линия -->
- <p>Некоторый текст. Основное содержание текущей страницы. Первый абзац
- <p>Второй абзац. Для форматирования текста используют разные элементы языка HTML.</p> <!–- абзац -->
- </body>
- </html>
- Комментарий
- Блочные (block elements)
- Структурное форматирование
- Текстовые (inline elements)
- Непосредственное форматирование
- Логическое форматирование (phrase elements)
- Нежелательные (deprecated)
- Устаревшие (obsolete)
- Новые (new)
- <title> С о д е р ж а н и е </title>
- Открывающий тег
- Закрывающий тег
- Элемент
- <h1>Заголовок первого уровня</h1><p>Элемент P представляет абзац. В нем <b>не могут</b> содержаться элементы уровня блока (включая и сам элемент P). Элементы, определяющие стиль шрифта:
- <b>полужирный,</b>
- <i>курсивный,</i>
- <u>подчёркнутый</u>и другие</p><p>Второй абзац</p>
- <h1>Заголовок 1</h1>
- <h2>Заголовок 2</h2>
- <h3>Заголовок 3</h3>
- <h4>Заголовок 4</h4>
- <h5>Заголовок 5</h5>
- <h6>Заголовок 6</h6>
- <h1>Горизонтальная линия</h1>
- <hr>
- <p>
- Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается в месте мягкого переноса…
- <P>
- Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается в месте мягкого переноса, в конце первой строки должен отображаться символ переноса.
- </P>
- <P>
- Если строка не прерывается в месте мягкого переноса, символ переноса отображаться не должен. При выполнении таких операций как поиск и сортировка мягкие переносы всегда должны игнорироваться.
- <p> Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил И лучше выдумать не мог.
- </p>
- <p>Мой дядя самых честных правил,
- <p>Когда не в шутку занемог,
- <p>Он уважать себя заставил
- <p>И лучше выдумать не мог.
- <p>Мой дядя самых честных правил,
- <br>Когда не в шутку занемог,
- <br>Он уважать себя заставил
- <br>И лучше выдумать не мог.
- <!-- Форматирование кода с отступами -->
- <html> <head> <title>Мой первый документ</title> </head> <body> <h1>Мой первый HTML-документ</h1> <hr> <h2>Евгений Онегин</h2> <p>А.С.Пушкин (отрывок) <p>
- Мой дядя самых честных правил,
- <br>Когда не в шутку занемог,
- <br>Он уважать себя заставил
- <br>И лучше выдумать не мог.
- <hr>
- </body>
- </html>
- <hr align="right" size="3" width="450" >
- Атрибут
- Атрибут
- Тег
- Имя атрибута
- Значение атрибута
- Атрибут
- <h1 align="center"> Выровнять по центру
- <p align="right"> Выровнять по правому краю
- <p align="justify"> Выровнять по ширине
- <h2 align="left"> Выровнять по левому краю
- <hr size="3"> Толщина разделительной линии
- <hr noshade> Разделительная линия без тени
- <hr align="right" width="450"> Ширина в пикселях
- <hr size="3" width="50%" align="center">
- <blockquote>
- They went in single file, running like hounds on a strong scent, and an eager light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed.</blockquote>
- <pre>
- Время –
- начинаю
- про Ленина рассказ.
- Но не потому,
- что горя
- нету более,
- время
- потому,
- что резкая тоска
- стала ясною
- осознанною болью.
- </pre>
- <p>Мой адрес:<address>Москва, 2-ая Бауманская, офис 703, Телефон/факс: 263-64-43</address>
- Элементы DIV и SPAN вместе с атрибутами id и class обеспечивают общий механизм добавления в документы структуры. Эти элементы определяют встраиваемую информацию (SPAN) или информацию уровня блока (DIV), но не налагают никаких других выражений для представления контекста
- <div align="center">
- Блок номер 1
- <div>
- Блок номер 2
- <div>
- Блок номер 3
- </div>
- </div>
- </div>
- <div id="main">
- <div class="one">Первый div</div>
- <div class="one">Второй div</div>
- <div class="one">Третий div</div>
- <span class="two">Первый span</span>
- <span class="two">Второй span</span>
- <span class="two">Третий span</span>
- </div>
|
- Диапазон: 00 - FF (0 - 255)
- #00FF00 – green (зеленый)
- #FF0000 – red (красный)
- #0000FF – blue (синий)
- #FFFFFF – white (белый)
- #000000 – black (черный)
- #FFFF00 – yellow (жёлтый)
- #FFD700 - gold (золотой)
- #FFCC00 - tangerine (мандариновый)
- #E49B0F - gamboge (гуммигут)
- #FDE910 – lemon (лимонный)
- Безопасная палитра цветов:
- 00,33,66,99, CC,FF (216 сочетаний).
- <html>
- <head>
- <title>Раскрашиваем страницу</title>
- </head>
- <body bgcolor="silver" text="#0000FF">
- <p>Этот текст синего цвета,
- <font color="red"> а этот - красного.</font>
- <hr color="green">Горизонтальная линия тоже может быть разноцветная.
- </body>
- </html>
- серифный шрифт: Times New Roman, serif
- рубленый шрифт: Arial, sans-serif
- моноширинный шрифт: Courier, monospace
- <font face="Arial,Verdana,sans-serif">
- Каким шрифтом будет показан текст?
- </font>
- size="1"
- size="2"
- size="3" Базовый размер по-умочанию
- size="4"
- size="5"
- size="6" Соответствует размеру <H1>
- size="7"
- <font size="-1">Величина шрифта на единицу меньше базового</font>
- <font size="7">Максимальный размер шрифта</font>
- <i> - курсив </i>
- <b> - полужирный </b>
- <u> - подчеркнутый </u>
- <strike> - перечеркнутый </strike>
- <tt> - моноширинный </tt>
- <big> - увеличить шрифт </big>
- <small> - уменьшить шрифт </small>
- <sup> - надиндекс </sup>
- <sub> - подиндекс </sub>
- <em> - выделение важных фрагментов курсивом
- <strong> - выделение особо важных фрагментов полужирным
- <ins> - выделение фрагмента подчеркиванием, когда требуется показать явно, что текст был вставлен после опубликования документа.
- <del> - выделение фрагмента перечеркиванием, когда требуется показать явно, что текст был удален после опубликования документа.
- <cite> - выделение цитат курсивом
- <code> - отображение фрагментов программного кода моноширинным шрифтом
- <kbd> - текст, вводимый с клавиатуры: отображается моноширинным шрифтом
- <var> - название переменных: отображается курсивом
- <samp> - выделение нескольких символов моноширинным шрифтом
- <dfn> - определение вложенного термина курсивом
- <abbr title="Какое-то слово"> - аббревиатура
- <acronym title="Какое-то слово"> - акроним
- <q lang="ru"> - определение кавычек
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- <nobr>п.1. Текст п. 1 никогда не будет перенесен браузером.<br> п.2. Но п.3 всегда будет идти двумя строками ниже.<br><br>п.3. Текст</nobr>
- deprecated: applet, basefont, center, dir, font, isindex, menu, s, strike, u...
- obsolete: listing, plaintext, xmp...
- <font> <span>
- Все элементы: http://www.w3.org/TR/html4/index/elements.html
- Все атрибуты: http://www.w3.org/TR/html4/index/attributes.html
- HTML 4.0
- CSS
- <h1 style="color: red; text-align: center">
- <span style="color: red">
- <div style="color: red; font-size: medium">
- <p style="color: blue; font-size: 14pt">
- Оформление текста
- Откройте файл lab-1-1.html
- 1
- Оформите HTML-файл следуя инструкциям, указанным в документе в виде комментариев
- 2
- Примерный образец выполнения работы - файл lab-1-1-result.html
- Дополнительные домашние задания: index.html index-result.html и reklama.html reklama-result.html
- Документ HTML состоит из элементов гипертекстовой разметки и является гипертекстовым документом
- Элемент состоит из открывающего тега, содержимого и закрывающего тега. Для некоторых элементов закрывающего тега не требуется
- Атрибуты располагаются внутри открывающего тега. Они представляют собой пару "имя=значение". Для атрибутов, у которых имя совпадает со значением, значение можно опустить.
- Элементы делятся на: образующие элементы блочной разметки, элементы внутренней разметки. Последние, влияют на непосредственное и логическое форматирование текста.
Информатика - еще материалы к урокам:
- Презентация "Компоненты ЛВС. Сетевое оборудование"
- Презентация "Авторське право та Інтернет. Безпечна робота в Інтернеті"
- Презентация "Создание движущихся изображений" 5 класс Босова Л.Л.
- Технологическая карта урока "Создание движущихся изображений" 5 класс Босова Л.Л.
- Презентация по информатике "Поле чуде" 7 класс
- Внеклассное мероприятие по информатике "Поле чуде" 7 класс