Инфоурок Другое ПрезентацииПрезентация на тему Язык HTML

Презентация на тему Язык HTML

Скачать материал
Скачать материал "Презентация на тему Язык HTML"

Получите профессию

Интернет-маркетолог

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Методические разработки к Вашему уроку:

Получите новую специальность за 2 месяца

Ландшафтный архитектор

Описание презентации по отдельным слайдам:

  • Начальные сведенияЯзык HTML 1

    1 слайд

    Начальные сведения
    Язык HTML
    1

  • Язык HTMLHTML (Hyper Text Markup Language) – язык разметки гипертекста, включ...

    2 слайд

    Язык HTML
    HTML (Hyper Text Markup Language) – язык разметки гипертекста, включает в себя способы оформления гипертекстовых документов.
    SGML (Standard Generalized Markup Language) - стандартный язык обобщенной разметки.
    XML (Extended Markup Language) - расширяемый язык разметки.
    2

  • Основные понятияГипертекст – структура, позволяющая 
устанавливать смысловые...

    3 слайд

    Основные понятия
    Гипертекст – структура, позволяющая
    устанавливать смысловые связки между элементами текста и другими документами.
    Гиперссылка – фрагмент текста, который
    является указателем на другой файл или объект.
    Web-узел или Web-сайт – группа Web-страниц, принадлежащих одному автору или одному издателю, взаимосвязанных общими гиперссылками.
    3

  • Фрейм (Frame)Этот термин имеет два значения:
 Область документа со своими пол...

    4 слайд

    Фрейм (Frame)
    Этот термин имеет два значения:
    Область документа со своими полосами прокрутки
    Одиночное изображение в анимационном графическом файле (кадр)
    4

  • Апплет (Applet)Программа, передаваемая на компьютер клиента в виде отдельного...

    5 слайд

    Апплет (Applet)
    Программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы
    Браузер (Browser)
    Программа для просмотра Web-страницы
    5

  • Скрипт или сценарий
 (Script)Программа, включенная в состав Web-страницы, для...

    6 слайд

    Скрипт или сценарий
    (Script)
    Программа, включенная в состав Web-страницы, для расширения ее возможностей
    CGI (Common Gateway Interface) – общее название программ, которые работая на сервере, позволяют расширить возможности Web –страничек.
    6

  • Что могут содержать Web-страницы:1). Тексты;
 
2). Таблицы;
 
3). Логотипы;
 ...

    7 слайд

    Что могут содержать Web-страницы:
    1). Тексты;
     
    2). Таблицы;
     
    3). Логотипы;
     
    4). Эмблемы;

    7

  • 5). Графику
Графические файлы самые распространенные и выгодные в формате .jp...

    8 слайд

    5). Графику
    Графические файлы самые распространенные и выгодные в формате .jpg (jpig), менее распространенные gif , но могут содержать не более 256 цветов, редко .png, и .bmp т.к. они имеют большие размеры, а основное правило хорошо оформленной страницы, это быстрая загрузка!!! По этому правилу размер любого графического файла не должен превышать 70 Кбайт или 400-500 пикселей со средним качеством. 
    Что могут содержать Web-страницы:
    8

  • Графические форматыGIF - Graphic Interchange Format.  При сохранении изображе...

    9 слайд

    Графические форматы
    GIF - Graphic Interchange Format. При сохранении изображения в этом формате количество используемых цветов не должно превышать 256.
    JPEG (JPG) - Joint Photography Experts Group.
    Этот формат допускает сохранение изображений, содержащих миллионы цветов.
    9

  • 6). Банеры – анимированные и не анимированные, выполняют чаще рекламную роль...

    10 слайд

    6). Банеры – анимированные и не анимированные, выполняют чаще рекламную роль и роль переключателей на другие страницы.
    большие имеют размер 468 х 60 пикселей,
    средние 120 х 60,
    маленькие 88 х 31.
    Собираются из файлов, созданных, например, в FotoShope. Это может быть текст, сменяющий другой или картинки.
    Могут быть анимированные кнопки. Gif- анимация – это, например, при наведении на кнопку появляется надпись
    Что могут содержать Web-страницы:
    10

  • 7). Мультимедиа –файлы (содержащие музыку (.mid), речь (.wav), видео (.avi)....

    11 слайд

    7). Мультимедиа –файлы (содержащие музыку (.mid), речь (.wav), видео (.avi).
    avi-фрагменты это очень большие файлы, поэтому на Web-страницах они не должны превышать 100 Кбайт
    wav- файлы лучше упаковывать, для чего есть специальные программы, которые сжимают в 10 раз (например, 10 секунд звучания это примерно 250 Кбайт можно упаковать до 25 Кбайт)
    mid – файлы это в основном инструментальная музыка без голоса. Поддерживаются только браузером Internet Explorer.
    .mp3 – файлы тоже можно использовать, но они очень большие(средний размер 5-7 Мбайт, 3 мин  3 Мбайта.
    Эти файлы (avi, wav, mid, mp3) практически не сжимаются. Из 3 Мбайт получается приблизительно 2,8 Мбайт.
    Gif-файлы сжимаются на 20%.

    Что могут содержать Web-страницы:
    11

  • 8) Скрипты – программы, которые расширяют возможности страниц, делают ее акти...

    12 слайд

    8) Скрипты – программы, которые расширяют возможности страниц, делают ее активной с обратной связью (формы, регистрационные листы, пишутся на языке Jawa и т.п.). Можно делать самим (бегущая строка, падающие буквы и т.п.), а можно брать готовые.
     9). Апплеты – программы, которые загружаются с сайта на компьютер клиента при открытии страницы, создают различные видеоэффекты (перелистывание страниц, вихревое движение, эффект пламени, деформации изображения, пишутся на языке Jawa с расширением .class).
     
    Что могут содержать Web-страницы:
    12

  • 10). Флэш-анимации – файлы сделанные по технологии макромедиа с расширением ....

    13 слайд

    10). Флэш-анимации – файлы сделанные по технологии макромедиа с расширением .swf. В этих файлах происходит действие, рекламные ролики. (Они быстро открываются, но для их открытия дополнительно к браузеру должна быть установлена специальная программа, позволяющая просматривать эти файлы, если программа не установлена, то как правило выдается запрос на ее загрузку из интернет).
    11). Гиперссылки – ссылки на другие станицы.
    12). Таблицы стилей –то файлы с расширением .css, в которых прописаны все изменения. Такое оформление придают страницам современный, эстетический стиль.
    Что могут содержать Web-страницы:
    13

  • теги HTML14

    14 слайд

    теги HTML
    14

  • HTML - тегиЯзык разметки гипертекстовых документов HTML представляет собой со...

    15 слайд

    HTML - теги
    Язык разметки гипертекстовых документов HTML представляет собой совокупность команд, называемых тегами
    (от английского tag).
    Тег – начальный или конечный маркер элемента записывается в угловых скобках и состоит из имени, за которым может
    следовать список атрибутов (все атрибуты располагаются в начальном теге).
    Большинство тегов имеют два компонента: открывающий и закрывающий. Закрывающий компонент имеет то же название, но при записи перед названием ставится символ « / ».
    15

  • Назначение HTML-теговФорматирования текста;
Описания кадров и форм; 
Форматир...

    16 слайд

    Назначение HTML-тегов
    Форматирования текста;
    Описания кадров и форм;
    Форматирования таблиц и списков;
    Организации ссылок на другие ресурсы;
    Вставки изображений и расширений HTML.
    16

  • Структура HTML-документа….….Начало разметки документасодержание страницыКонец...

    17 слайд

    <HTML>
    </HTML>
    <HEAD>
    </HEAD>
    <BODY>
    </BODY>
    Структура HTML-документа
    ….
    ….
    Начало разметки документа
    содержание страницы
    Конец разметки документа
    17

  • Между тегами  и  пишется название сайтаТег   несет служебную информацию о са...

    18 слайд

    Между тегами <Title> и </Title> пишется название сайта
    Тег <meta> несет служебную информацию о сайте
    и не отображается на экране браузера:

    Имя автора страницы;
    Информация о кодировке;
    Набор ключевых слов для поиска, отображающих содержание сайта.
    18

  • Пример Web -страницы
	
  		 О братьях наших меньших 
		
		
		
	
		

		Здесь р...

    19 слайд

    Пример Web -страницы
    <HTML>
    <HEAD>
    <TITLE> О братьях наших меньших </TITLE>
    <META http-equiv=“Content-Type” content=“text/html; charset=windows-1251”>
    <META name=“Author” content=“Ivanov Ivan”>
    <META name = “Keywords” content=“Животные, природа, зоопарк, фауна”>
    </HEAD>
    <BODY>

    Здесь размещается содержимое страницы

    </BODY>
    </HTML>

    19

  • школаСайт, посвященный школе
&lt; META  NAME=“keywords” CONTENT =“школа, класс,...

    20 слайд

    <HTML>
    <TITLE> школа</TITLE>
    </HTML>
    <HEAD>
    </HEAD>
    <BODY>
    </BODY>
    Сайт, посвященный школе


    < META NAME=“keywords” CONTENT =“школа, класс, урок, обучение, образование, знание”>

    Пример Web –страницы с метатегами
    20

  • Задание 1 Создание структуры страницыОткройте текстовый редактор блокнот.
Наб...

    21 слайд

    Задание 1 Создание структуры страницы
    Откройте текстовый редактор блокнот.
    Наберите структуру приведенной ранее страницы
    Между элементами <BODY></BODY> наберите
    <P> Моя первая страница</P>
    4. Сохраните файл с именем index.htm в папке STRANICA
    5. Просмотрите страницу в браузере.

    21

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

    22 слайд

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

  • Форматирования текстаФорматировать текст можно традиционными способами: выдел...

    23 слайд

    Форматирования текста
    Форматировать текст можно традиционными способами: выделять курсивом, полужирным, выбирать шрифт, размер, цвет, выравнивать текстовые фрагменты. Все эти характеристики задаются при помощи соответствующих атрибутов в теге управления шрифтом
    <FONT> текст </FONT>
    Размер задается атрибутом SIZE, который может принимать значения от 1 до 7.
    Пример.
    <FONT SIZE=3> тексту задан размер 3 </FONT>

    23

  • COLOR – атрибут для определения цвета, название которого задается числом в ше...

    24 слайд

    COLOR – атрибут для определения цвета, название которого задается числом в шестнадцатеричной системе счисления или название на английском языке

    color=“#FF0000” color=”red”
    Пример.
    <FONT color=“blue”> это шрифт синего цвета</FONT>
    R-red 00-FF 0-255
    G-green 00-FF 0-255
    B - blue 00-FF 0-255
    RGB
    24

  • Названия цветов и значения RGB25

    25 слайд

    Названия цветов и значения RGB
    25

  • форматирование 
шрифтов26

    26 слайд

    форматирование
    шрифтов
    26

  • FACE – позволяет задавать тип шрифта или несколько шрифтов (через точку с зап...

    27 слайд

    FACE – позволяет задавать тип шрифта или несколько шрифтов (через точку с запятой)
    Пример.
    <FONT FACE=“arial”> </ FONT>
    Все атрибуты могут быть использованы совместно внутри тега < FONT>
    Пример.
    <FONT FACE=“arial” size=3 color=“blue”> Это шрифт arial размером 3 синего цвета</ FONT>

    27

  • тест выделение шрифта полужирным шрифтом
тест  выделение шрифта курсивом

тес...

    28 слайд

    <B>тест</B> выделение шрифта полужирным шрифтом
    <I>тест</I> выделение шрифта курсивом

    <U>тест</U> подчеркнутый шрифт

    x<sup>2</sup> верхний индекс (х2)

    x<sub>2</sub> нижний индекс (х2)


    Форматирование шрифтов
    28

  • Примеры со шрифтами


Пример действия параметра FASE





ШРИФТ

РАЗНОГО


&lt;...

    29 слайд

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


    Пример действия параметра FASE



    <P ALIGN =CENTER>

    <FONT SIZE=5 FACE=Arial Cyr>ШРИФТ</FONT>

    <FONT SIZE=5 FACE=Times New Romans Cyr>РАЗНОГО</FONT>


    < FONT SIZE=5 FACE=Courier New Cyr>НАЧЕРТАНИЯ</FONT>

    </P>
    29

  • Примеры со шрифтами

Пример действия параметра SIZE
 

ШР
ИФ
Т
РА
ЗН
ОГ
О
РА...

    30 слайд

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

    Пример действия параметра SIZE

    <P ALIGN =CENTER>
    <FONT SIZE=1 >Ш</FONT><FONT SIZE=+1 >Р</FONT>
    <FONT SIZE=+2 >И</FONT><FONT SIZE=+1 >Ф</FONT>
    <FONT SIZE=1 >Т</FONT>
    <FONT SIZE=2 >Р</FONT><FONT SIZE=+1 >А</FONT>
    <FONT SIZE=+2 >З</FONT><FONT SIZE=+3 >Н</FONT>
    <FONT SIZE=+2 >О</FONT><FONT SIZE=+1 >Г</FONT>
    <FONT SIZE=2 >О</FONT>
    <FONT SIZE=3 >Р</FONT><FONT SIZE=+1 >А</FONT>
    <FONT SIZE=+2 >З</FONT><FONT SIZE=+3 >М</FONT>
    <FONT SIZE=+2 >Е</FONT><FONT SIZE=+1 >Р>/FONT>
    <FONT SIZE=3 >А</FONT>
    </P>

    30

  • Примеры со шрифтами

Пример действия параметра COLOR



ШРИФТ

РАЗНОГО 

&lt; FO...

    31 слайд

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

    Пример действия параметра COLOR

    <P ALIGN =CENTER>

    <FONT SIZE=5 COLOR=RED>ШРИФТ</FONT>

    <FONT SIZE=5 COLOR=GREEN>РАЗНОГО </FONT>

    < FONT SIZE=5 COLOR=BLUE>ЦВЕТА </FONT>


    </P>

    ЗАДАНИЕ
    Написать разными по цвету буквами:
    КАЖДЫЙ ОХОТНИК ЖЕЛАЕТ ЗНАТЬ ГДЕ СИДИТ ФАЗАН
    31

  • т    е    с    т  -сохраняет исходный вид отформатированного текста с пробела...

    32 слайд

    <pre>т е с т </pre> -сохраняет исходный вид отформатированного текста с пробелами, разбивками на строки и т.п. (т е с т )
    Пример

    <H3 ALIGN=CENTER> ПУТЬ К МУДРОСТИ </H3>
    <PRE><FONT SIZE=3>
    К мудрости путь – по ухабам ошибок;
    Иди же и носа не вешай:
    Ушибы,
    ушибы,
    и снова ушибы
    Но реже
    и реже,
    и реже…
    </PRE>

    Форматирование шрифтов
    32

  • фоматирование 
заголовков33

    33 слайд

    фоматирование
    заголовков
    33

  • Форматирования заголовковтест  тест
тест  тест
тест  тест
тест  тест
тест...

    34 слайд

    Форматирования заголовков
    <h1>тест</h1>  тест
    <h2>тест</h2>  тест
    <h3>тест</h3>  тест
    <h4>тест</h4>  тест
    <h5>тест</h5>  тест
    <h6>тест</h6>  тест
    Существует шесть уровней заголовков
    34

  • Пример	


 ОСНОВНОЙ ЗАГОЛОВОК (H1)  ПО ЦЕНТРУ

 ПОДЗАГОЛОВОК (Н2) ПО ПРАВОМУ...

    35 слайд

    Пример


    <H1 ALIGN=CENTER> ОСНОВНОЙ ЗАГОЛОВОК (H1) ПО ЦЕНТРУ</H1>

    <H2 ALIGN=RIGHT> ПОДЗАГОЛОВОК (Н2) ПО ПРАВОМУ КРАЮ </H2>

    <H3 ALIGN=CENTER> ПОДЗАГОЛОВОК (Н3), ВЫРАВНИВАНИЕИ ПО УМОЛЧАНИЮ </H3>

    <H4 ALIGN=CENTER> ПОДЗАГОЛОВОК (Н4) ПО ЦЕНТРУ</H4>

    <H5 ALIGN=LEFT> ПОДЗАГОЛОВОК (Н5) ПО ПРАВОМУ КРАЮ</H5>

    <H6 ALIGN=RIGHT> ПОДЗАГОЛОВОК (Н6) ПО ПРАВОМУ КРАЮ</H6>


    35

  • форматирование
 абзацев36

    36 слайд

    форматирование
    абзацев
    36

  • Разбивка на абзацытекст  - новый абзац, можно использовать только начальный т...

    37 слайд

    Разбивка на абзацы
    <P>текст </P> - новый абзац, можно использовать только начальный тег, т.к. следующий элемент <p> обозначает не только начало следующего абзаца, но и конец предыдущего
    тест<BR>тест -перенос текста на новую строку без абзацного отступа
    тест
    тест
    тест<HR>тест разделительная линия

    тест
    тест
    37

  • Параметры тега HR38

    38 слайд

    Параметры тега HR
    38

  • NOSHADE  запрет выпуклости

 ПРИМЕРЫ ОТЛИНОВОК

простая отлиновка толщиной 2...

    39 слайд

    NOSHADE запрет выпуклости

    <H2 ALIGN=CENTER> ПРИМЕРЫ ОТЛИНОВОК</H2>
    <HR SIZE=2 WIDTH=80% ALIGN=CENTER>
    <P ALIGN=CЕNTER>простая отлиновка толщиной 2 пикселя </P>

    <HR SIZE=20 WIDTH=20% ALIGN=CENTER>
    <P ALIGN=CЕNTER>толстая и короткая линия </P>

    <HR SIZE=20 WIDTH=20% COLOR=RED NOSHADE
    ALIGN=CENTER>
    <P ALIGN=CЕNTER>такая же линия красного цвета </P>
    <P>
    <HR SIZE=30 WIDTH=30 COLOR=BLACK NOSHADE
    ALIGN=CENTER>
    ALIGN=CENTER>черный квадрат 30х30 пикселей </P>



    Примеры отлиновок
    39

  • Пример.

Уронили мишку на пол,  Оторвали мишке лапу,  Все равно его не брошу,...

    40 слайд

    Пример.

    Уронили мишку на пол, <BR> Оторвали мишке лапу, <BR> Все равно его не брошу, <BR> Потому, что он хороший
    На экране браузера увидим разбиение текста на четверостишие
    40

  • Выравнивание абзацевВместе с элементом абзац  можно использовать атрибут выра...

    41 слайд

    Выравнивание абзацев
    Вместе с элементом абзац <p> можно использовать атрибут выравнивания align
    41

  • По умолчанию выравнивание по левому краю

Центрирование всех строк абзаца,...

    42 слайд

    <P> По умолчанию выравнивание по левому краю</P>

    <p ALIGN =center>Центрирование <BR>всех строк абзаца, <BR> в том числе включая принудительные разрывы</p>

    <p ALIGN =RIGHT> Этот абзац выровнен по правому краю</p>

    <p ALIGN =LEFT> Этот абзац выровнен по левому краю, также, как и по умолчанию</p>

    <p ALIGN =JUSTIFY> Этот абзац выровнен одновременно по левому и правому краям, но в старых версиях браузеров воспринимается как выравнивание по левому краю</p>


    Пример
    42

  • Задание 2 Форматирование текста на страницеСоздайте новую страницу в редактор...

    43 слайд

    Задание 2 Форматирование текста на странице
    Создайте новую страницу в редакторе блокнот.
    В элемент <title> укажите «Практическая работа 2» и вашу фамилию.
    Отформатируйте текст по заданию:
    Домашние животные (заголовок H1)
    Собаки (заголовок H2, центральное выравнивание}
    Сторожевые (выравнивание слева, полужирный шрифт)
    Охотничьи (выравнивание справа, полужирный шрифт)
    Дрессировка (выравнивание по центру, полужирный курсивный шрифт)
    КлубыВыставкиПлощадки
    (выравнивание по центру, размер шрифта14, цвет красный)
    Стихотворение (выравнивание по центру, синий шрифт)
    По жизни я скромен
    Оваций не надо!
    Но как же я классно(Выравнивание по левому краю, размер шрифта 10)
    Смотрюсь у снаряда!
    43

  • 1. Создайте новую страницу в редакторе блокнот.2. В элемент  укажите «Практ...

    44 слайд

    1. Создайте новую страницу в редакторе блокнот.
    2. В элемент <title> укажите «Практическая работа 3» и вашу фамилию.
    3. Отформатируйте текст по заданию:
    <html>
    <head>
    <title>Практическая работа3 Фамилия </title>
    </head>
    <body>
    <font size=1 color=#ff0000 > Каждый </font>
    <font size=2 color=#ff9900 > охотник </font> <font size=3 color=#ffff00 > желает </font>
    <font size=4 color=#00ff00 > знать, </font>
    <font size=5 color=#00ccff > где </font>
    <font size=6 color=#0000ff > сидит </font>
    <font size=7 color=#ff00ff > фазан </font>
    </body>
    </html>
    Задание 3 Форматирование текста на странице
    44

  • Практическая работа 4 Фамилия             Роман Книга...

    45 слайд

    <html>
    <head>
    <title>Практическая работа 4 Фамилия
    </title>
    </head>
    <body>
    <h1> Роман</h1>
    <h2> Книга</h2>
    <h3> Том</h3>
    <h4> Часть</h4>
    <h5> Глава</h5>
    <h6> Параграф</h6>
    </body>
    </html>
    Задание 4 Форматирование заголовков
    1. Создайте новую страницу в редакторе блокнот.
    2. В элемент <title> укажите «Практическая работа 4» и вашу фамилию.
    3. Отформатируйте текст по заданию:

    45

  • Задание 5 Форматирование абзацевСоздайте новую страницу в редакторе блокнот....

    46 слайд

    Задание 5 Форматирование абзацев
    Создайте новую страницу в редакторе блокнот.
    2. В элемент <title> укажите «Практическая работа 5» и вашу фамилию.
    3. Отформатируйте текст стихотворения тремя разными способами оформления:
    Уж небо осенью дышало.
    Все реже солнышко блистало.
    Короче становился день.
    Текст шрифта красный, размером 4, курсив
    46

  • html&gt;                 1 способ форматирования            Уж небо осенью...

    47 слайд

    html>
    <head>
    <title> 1 способ форматирования </title>
    </head>
    <body>
    <font size=4 color=#ff0000 >
    <b><I> <p>Уж небо осенью дышало. </p>
    <p> Все реже солнышко блистало. </p>
    <p> Короче становился день. </p>
    </I></b></font>
    </body>
    </html>
    Пример 1 ответ к заданию 5
    47

  • html&gt;                2 способ форматирования            Уж небо осенью...

    48 слайд

    html>
    <head>
    <title>2 способ форматирования </title>
    </head>
    <body>
    <font size=4 color=#ff0000 >
    <p align=center><b><I>
    Уж небо осенью дышало.

    Все реже солнышко блистало.

    Короче становился день.

    </I></b</p>
    ></font> </body>
    </html>
    Пример 2 ответа к заданию 5
    48

  • html&gt;                3 способ форматирования             &lt; Уж небо осен...

    49 слайд

    html>
    <head>
    <title>3 способ форматирования </title>
    </head>
    <body>
    <pre>< <font size=4>
    Уж небо осенью дышало.
    Все реже солнышко блистало.
    Короче становился день.
    ></font> </pre>
    </body>
    </html>
    Пример 3 ответа к заданию 5
    49

  • Бегущая строка…Параметры:

BGCOLOR- фоновый цвет плашки

WIDTH  HEIGHT -шири...

    50 слайд

    Бегущая строка
    <MARQUEE>…</MARQUEE>
    Параметры:

    BGCOLOR- фоновый цвет плашки

    WIDTH HEIGHT -ширина и высота плашки

    LOOP -количество повтороений (INFINITE - непрерывно)

    SCROOLLAMOUNT-скорость прокручивания, на котором строка смещается при каждом шаге прокрутки в пикселях

    SCROOLLDELAY- задает задержку в миллисекундах между шагами прокрутки
    DIRECTION-указывает напрвление прокрутки
    BEHAVIOR=SCROOLL -напрвление слева направо
    BEHAVIOR=SLIDE - напрвление справа налево
    50

  • Пример бегущей строки






 НАЗВАНИЕ ФИРМЫ ПРИХОДИТЕ ПОЖАЛУЙСТА!





Строка...

    51 слайд

    Пример бегущей строки
    <MARQUEE BEHAVIOR=ALTERNATE DIRECTION=RIGHT LOOP=5 SCROOLLAMOUNT=3 SCROOLLDELAY=100 WIDTH=50% HEIGHT=150 BGCOLOR=“#F0F000” HSPACE=10 VSPACE=10>
    <BR>
    <TABLE WIDTH=300 BORDER=1 BGCOLOR=“FFF0DE”>
    <TR>
    <TD ALIGN=CENTER VALIGN=MIDDLE WIDTH=100>
    </TD>
    <TD ALIGN=CENTER VALIGN=MIDDLE>
    <FONT COLOR=“RED”> НАЗВАНИЕ ФИРМЫ<BR> ПРИХОДИТЕ ПОЖАЛУЙСТА!</B></FONT>
    </TD>
    </TR>
    </TABLE>
    </MARQUEE>

    Строка пять разпроплывает вправо-влево, затем останавливается возле правого края желтой плашки

    51

  • форматирование
списков52

    52 слайд

    форматирование
    списков
    52

  • Маркированные списки
	первый элемент
	второй элемент


Результат:
первый элем...

    53 слайд

    Маркированные списки
    <ul>
    <li>первый элемент</li>
    <li>второй элемент</li>
    </ul>

    Результат:
    первый элемент
    второй элемент
    53

  • Нумерованные списки
	первый элемент
	второй элемент


	1. первый элемент 
2....

    54 слайд

    Нумерованные списки
    <ol>
    <li>первый элемент</li>
    <li>второй элемент</li>
    </ol>

    1. первый элемент
    2. второй элемент
    54

  • Способы нумерации списковСпособ нумерации задается за счет атрибута typeАтриб...

    55 слайд

    Способы нумерации списков
    Способ нумерации задается за счет атрибута type
    АтрибутВид нумерации
    type=“1”1, 2, 3, 4…
    type=“i”i, ii, iii, iv…
    Type=“I”I, II, III, IV…
    type=“a”a, b, c, d…
    type=“A”A, B, C, D…

    55

  • Списки определений
	Термин
	Определение


Результат:
Термин 
Определение56

    56 слайд

    Списки определений
    <dl>
    <dt>Термин</dt>
    <dd>Определение</dd>
    </dl>

    Результат:
    Термин
    Определение
    56

  • ПРИМЕР

	введение 
	назначение языка HTML
          команды теги HTML...

    57 слайд

    ПРИМЕР
    <ol start=1 type=I>
    <li>введение </li>
    <li>назначение языка HTML</li>
    <li>команды теги HTML</li>
    <ol start=1 type=1>
    <li>форматирование текста </li>
    <ul type=disc>
    <li>жирность </li>
    <li>наклон </li>
    <li>подчеркивание </li>
    <li>индексы </li>
    <ul type=circle>
    <li>нижние </li>
    <li>верхние </li>
    <li>подчеркивание </li>
    </ul>
    <li> цвет </li>
    </ul>
    <li>работа с абзацами</li>
    </ol>
    <li>дизайн страницы</li>
    li>размещение сайта на сервере</li>
    </ol>
    57

  • Задание 6 Создание списковСоздайте новую страницу в редакторе блокнот.
В элем...

    58 слайд

    Задание 6 Создание списков
    Создайте новую страницу в редакторе блокнот.
    В элемент <title> укажите «Практическая работа 6» и вашу фамилию.
    Отформатируйте текст по заданию:
    Солнце должно быть: (шрифт размером 7, красного цвета, выравнивание по центру)
    Теплым.
    Круглым.
    Желтым.
    Снег должен быть: (выравнивание по центру, размер шрифта 7, синего цвета)
    А. Белым
    B. Холодным
    C. Пушистым
    (шрифт списков черный, размер 3)
    58

  • Задание 6 -1 Создание списковСоздайте страницы со следующими списками:


Пере...

    59 слайд

    Задание 6 -1 Создание списков
    Создайте страницы со следующими списками:


    Перечень покупок:
    Говядина -1кг
    Масло сливочное -500 г
    Хлеб - 2 батона
    Молоко - 1 литр


    Алгоритм вычисления дробей:
    очистить экран
    ввести значения X и Y
    если у=0, вернуться к пункту 2
    вычислить z=x/y
    вывести результат z
    59

  • оформление фона
и вставка рисунков60

    60 слайд

    оформление фона
    и вставка рисунков
    60

  • Задание фона страницыДля задания цвета фона на странице надо внутри начальног...

    61 слайд

    Задание фона страницы
    Для задания цвета фона на странице надо внутри начального элемента<BODY> указать атрибут bgcolor =“цвет”. Цвет задается также как и для шрифта названием или цифровым кодом.
    Пример

    <BODY BGCOLOR=“blue”>… </BODY>

    <BODY BGCOLOR=“00FF00”>… </BODY>

    <BODY BACKGROUND=“FON.JPG”>
    61

  • Вставка рисунковIMG – тег для создания ссылки на графический файл. С его помо...

    62 слайд

    Вставка рисунков
    IMG – тег для создания ссылки на графический файл. С его помощью также можно использовать изображение в гиперссылках, вставлять картинки в таблицы, использовать изображения для фона страницы. Не содержит конечного тега.
    Необходимым атрибутом является src- указатель пути к графическому файлу, alt – выводит текст, поясняющий загружаемый рисунок. Высоту и ширину рисунка задают с помощью атрибутов height и width. Рамка вокруг объекта задается атрибутом border.
    Пример.
    <IMG src=“boss.gif” border=2 height =121 width=76 alt=“мой портрет”>

    <BODY BACKGROUND=“WOOD.JPG”>

    62

  • рисунок в центре, текст сверху и снизу

  рисунок слева

  рисунок справа
П...

    63 слайд

    <P align=center><IMG src="pic.gif" ></p> рисунок в центре, текст сверху и снизу

    <P align=justify><IMG src="pic.gif" align=left> </p> рисунок слева

    <P align=justify><IMG src="pic.gif" align=right> </p> рисунок справа

    Примеры обтекания иллюстраций в документе
    63

  • Задание 7 Размещение графики на Web - страницахСоздайте новую страницу в реда...

    64 слайд

    Задание 7 Размещение графики на Web - страницах
    Создайте новую страницу в редакторе блокнот.
    В элемент <title> укажите «Практическая работа 7» и вашу фамилию.
    В элементе <BODY> задайте атрибут, чтобы цвет фона страницы был черным.
    Сделайте надпись «Спокойной ночи» голубым цветом, 6 шрифтом, центральным выравниванием.
    Вставьте горизонтальную линию красного цвета.
    Сделайте надпись желтого цвета «Приятных сновидений» 8 шрифтом, центральным выравниванием.
    Вставьте горизонтальную линию синего цвета толщиной 10 пикселей, длиной 50%, выровните по центру.
    Рисунок


    64

  • Задание 8 Размещение графики на Web - страницахСоздайте новую страницу в реда...

    65 слайд

    Задание 8 Размещение графики на Web - страницах
    Создайте новую страницу в редакторе блокнот.
    В элемент <title> укажите «Практическая работа 8» и вашу фамилию.
    Разместите на странице рисунок
    Сделайте надпись к рисунку
    Создайте рамку вокруг рисунка шириной 2 пикселя.
    Над рисунком поместите заголовок (например «Мир футбола») самого большого размера и выровняйте его по центру.
    Вставьте горизонтальную линию синего цвета толщиной 8 пикселей, выровняйте по левому краю по центру.


    65

  • Задание 9 изменение размеров изображенияСоздайте новую страницу в редакторе б...

    66 слайд

    Задание 9 изменение размеров изображения
    Создайте новую страницу в редакторе блокнот.
    В элемент <title> укажите «Практическая работа 9» и вашу фамилию.
    В элементе <BODY> задайте атрибут, чтобы цвет фона страницы зеленым.
    Вставьте изображение. Задайте его размеры 100x100 пикселей.
    Отредактируйте картинку в графическом редакторе так, чтобы рисунок был на прозрачном фоне и добавьте это изображение на вашу страничку.


    66

  • гиперссылки67

    67 слайд

    гиперссылки
    67

  • ГиперссылкиГиперссылки условно можно разделить на следующие виды:
 Внутренние...

    68 слайд

    Гиперссылки
    Гиперссылки условно можно разделить на следующие виды:
    Внутренние –связывающие документы внутри одного и того же узла;
    Внешние – связывающие Web-страницу с документами, не принадлежащими данному узлу;
    Гиперссылка на почтовый адрес;
    Метки-якоря – позволяющие переходить посетителю на определенные разделы документа.
    68

  • Гиперссылки  текст для щелчка мыши 
   
Внутри тега  используется атрибут, за...

    69 слайд

    Гиперссылки
    <A href = “адрес ссылки”> текст для щелчка мыши </A>
    <A href = “адрес ссылки”> <IMG src=“ссылка на рисунок”> </A>

    Внутри тега <BODY> используется атрибут, задающий цвет гиперссылок
    link – задает цвет исходных ссылок
    vlink – задает цвет посещенных ссылок
    alink – задает цвет активных ссылок (цвет при нажатии мыши)

    Для указания электронной почты и запуска электронной программы используется ссылка:
    <A href =“mailto:vvv@mail.ru”> Иванов Иван</A>
    69

  • Примеры гиперссылок Новые поступления - переход к строке той же страницы, пом...

    70 слайд

    Примеры гиперссылок
    <A href=“#new” > Новые поступления</A> - переход к строке той же страницы, помеченной тегом
    <A name=“new”>

    <A href=“pag2.htm#new1” > примечания</A> - переход на страницу сайта pag2 к строке, помеченной тегом
    <A name=“new1”>

    <p> подробности читайте<A href=“pag2.htm” > вторая страница </A></p> - ссылка на другую страницу того же сайта

    70

  • IMG src=log.gif alt=“о нашей фирме”  - ссылка на другую страницу того же са...

    71 слайд

    <p> <A href=“pag2.htm” > IMG src=log.gif alt=“о нашей фирме” </A></p> - ссылка на другую страницу того же сайта, но ссылкой является рисунок

    <A href=“myfile.exe” title=” файл 10 мегабайт”> Скачать программу</A> -ссылка с подсказкой title

    <A ref=“http://home.ifmo.ru/index.html”>тест</A> - внешняя ссылка


    Примеры гиперссылок
    71

  • Примеры гиперссылокпервая страница
  yandex

 Почта 


72

    72 слайд

    Примеры гиперссылок
    <a href=“proba.htm”>первая страница</a>

    <a href=“http://www.yandex.ru”> yandex</a>

    <a href=“mailto:Jakov21@yandex.ru”> Почта </a>



    72

  • Задание 10 Создание гиперссылок1.Создайте две страницы с именами str1.htm str...

    73 слайд

    Задание 10 Создание гиперссылок
    1.Создайте две страницы с именами str1.htm str2.htm

    2.В элемениеTITLTRE укажите название странички

    3. Задайте фон первой страницы зеленого цвета, а второй
    Синего

    4. На первой странице задайте ссылку на вторую страницу
    <A href=“str2.htm”> На вторую страницу</a>

    5. На второй странице задайте ссылку на 1 страницу
    <A href=“str2.htm”> На вторую страницу</a>

    6.Поместите на страницы две разные картинки и проверьте
    работу гиперссылок

    73

  • Задание 11 Создание гиперссылок1.Создайте к страницам прошлого задания
 с име...

    74 слайд

    Задание 11 Создание гиперссылок
    1.Создайте к страницам прошлого задания
    с именами str1.htm str2.htm еще одну страницу str3.htm

    2.Добавьте на первых двух страницах ссылку на 3 страницу?
    А на третьей ссылки на две первые

    3. В теге <BODY> определите текст гиперссылок:
    все гиперссылки -белые
    активные гиперсылки - красные
    посещенные гиперссылки -серые

    4. На третьей странице задайте ссылки на вторую и первую
    страницы в виде рисунка кнопки
    <A href=“str2.htm”> IMG src=“kn.gif”></a>

    5. Задайте бордюр для кнопок=2

    6. Проверьте работу гиперссылок

    74

Получите профессию

Фитнес-тренер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 625 539 материалов в базе

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 03.07.2020 352
    • PPTX 656 кбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Горбачёва Ирина Вакильевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

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

    Удалить материал
  • Автор материала

    Горбачёва Ирина Вакильевна
    Горбачёва Ирина Вакильевна
    • На сайте: 3 года и 3 месяца
    • Подписчики: 0
    • Всего просмотров: 79902
    • Всего материалов: 231

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Копирайтер

Копирайтер

500/1000 ч.

Подать заявку О курсе

Курс профессиональной переподготовки

Руководство электронной службой архивов, библиотек и информационно-библиотечных центров

Начальник отдела (заведующий отделом) архива

600 ч.

9840 руб. 5900 руб.
Подать заявку О курсе

Курс повышения квалификации

Специалист в области охраны труда

72/180 ч.

от 1750 руб. от 1050 руб.
Подать заявку О курсе
  • Сейчас обучается 40 человек из 19 регионов

Курс профессиональной переподготовки

Библиотечно-библиографические и информационные знания в педагогическом процессе

Педагог-библиотекарь

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 458 человек из 66 регионов

Мини-курс

Налогообложение и компенсация потерь: предотвращение ошибок и снижение рисков

6 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Договоры и их правовое регулирование

8 ч.

1180 руб. 590 руб.
Подать заявку О курсе

Мини-курс

Российское движение школьников (РДШ): воспитательная работа

3 ч.

780 руб. 390 руб.
Подать заявку О курсе
Сейчас в эфире

Восстановительные и медиативные практики в профилактике кибербуллинга

Перейти к трансляции