Краткая инструкция по созданию Web-страницы
план-конспект урока по информатике и икт (9 класс) на тему

Тимофеева Оксана Игоревна
Опубликовано 11.04.2013 - 13:08 - Тимофеева Оксана Игоревна

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

Скачать:

ВложениеРазмер
Файл tegi_.docx14.42 КБ
Файл freymy.docx13.04 КБ

Предварительный просмотр:

Структура WEB-страницы

</span><span class="c0">index</span><span class="c4 c0">

Тело страницы: текст, иллюстрации, гиперссылки, таблицы и т.д.

Атрибуты тэга BODY:

Изменение цвета фона:

<body bgcolor="000000">

Фон картинкой:

<body background="имя.расшир" bgproperties="fixed">

Работа с текстом

="4" face="Arial" color="red">текст

Size – размер шрифта

Face – начертание (гарнитура)

Color – цвет

Заголовки

ЗАГОЛОВОК  , где n – от 1до 6, чем меньше n, тем крупнее заголовок

САМЫЙ КРУПНЫЙ ЗАГОЛОВОК

Вставка иллюстраций:

<IMG SRC="имя.расш"width="300"height="300" alt="альтернативный текст" align="left"или"right">

Width – это ширина картинки,

Height – это её высота,

alt – текст, который будет появляться вместо картинки,

Align – обтекание картинки текстом

Это одиночный тэг, т.е. закрывать его не надо.

Гиперссылки

<A href="имя.расш">активный текст

Имя и расширение – это тот файл, который будет открыт после нажатия на ссылку (активный текст)

="имя.расш."><img src="имя.расш.">активный текст

Это ссылка с картинки, которая вставлена в текст, активный текст можно и не вставлять.

Цвет ссылок можно изменять в тэге Body<Body vlink="цвет" alink="цвет">

VLink – цвет неиспользованной ссылки

Alink – цвет использованной ссылки

Бегущая строка

 или "slide" или "alternate" direction="left" или "right" bgcolor="цвет" >

Behavior – вид бегущей строки

Scroll – ходит по кругу

Slide – выйдет и остановится

Alternate -  прыжки

Direction – направление движения строки

Bgcolor – фон бегущей строки

Для перевода строки в начало абзаца используется тэг

Списки

  • text

    • Чтобы задать вид маркеров

  • - пустой кружок

  • - кружок

  • - квадратик

     Текст с отступом

      text

    Таблицы

    - таблица

    строка

    Можно задать размеры ячеек тэгами Width и Height:

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

    :



    Предварительный просмотр:

    Фреймы

    Фрейм – это кадр. При помощи фреймов в одном документе можно создавать несколько самостоятельных страничек в одной. Разделить страницу можно по-разному. Мы выбираем  вот такой вид:

                                                                                   

    и для этого создаём документ:

    <html>

    <head>

    <title>indextitle>

    <frameset cols=”150,*”>

    <frameset rows=”150,*”>

    <frame src=”logo.html”>

    <frame src=”menu.html”>

    >

    <frame src=”content.html”>

    frameset>

    head>

    </html>

                       

    Теперь нужно создать все перечисленные документы: Logo, Menu и Content.

    Для того, чтобы линейка прокрутки не мешала в Logo и картинка прижималась к краям, нужно добавить несколько атрибутов в тэг

    <frame src=”logo.html”>  получим в результате:

    <html>

    <head>

    <title>indextitle>

    <frameset cols=”150,*”>

    <frameset rows=”150,*”>

    <frame src=”logo.html” scrolling= “no” marginwidth=”0” marginheight=”0”>

    <frame src=”menu.html”>

    >

    <frame src=”content.html”>

    frameset>

    head>

    </html>

    Документу Content нужно дать имя, для того, чтобы ссылки из меню отображались в окне Content. Вот так:

    <html>

    <head>

    <title>indextitle>

    <frameset cols=”150,*”>

    <frameset rows=”150,*”>

    <frame src=”logo.html” scrolling= “no” marginwidth=”0” marginheight=”0”>

    <frame src=”menu.html”>

    >

    <frame src=”content.html”name= «1»>

    frameset>

    head>

    </html>

     А в документе Menu нужно в ссылках использовать target=  “1 “


    По теме: методические разработки, презентации и конспекты

    Краткая инструкция по организации работы по методу проектов

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

    Краткая инструкция по программе "Сбор РБД"

    И Н С Т Р У К Ц И Япо заполнению полей программы «Сбор РБД» образовательными учреждениями, проходящими проверку качества предметной обученности обучающихся образовательных учреждений Санкт-Петербурга,...

    Инструкция по созданию курса в АИС «Сетевой город. Образование» и работе с ним Инструкция по созданию курса в АИС «Сетевой город. Образование» и работе с ним

    данный материал поможет работать и создавать свои курсы в АИС "Сетевой город. образование"....

    Краткая инструкция по созданию базы данных в Access

    Уроки по созданию баз данных, конечно, дают многие учителя в разных классах - и в 8-х, и старше. Я не предлагаю уроков по созданию базы данных, я просто предлагаю краткую инструкцию, которая позв...

    Stop Motion анимация ( Краткая инструкция по созданию перекладной анимации )

    Краткая инструкция по созданию мульфильмов, для педагогов...

    Создание электронного банка данных психолого-педагогического сопровождения учащихся в школе: Инструкция по созданию и методические рекомендации

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

    Google Classroom: функционал и краткая инструкция по созданию онлайн-курса

    Укытучылар өчен ярдәмлек материал...


     
    - столбецtd>

    Строка делится на ячейки-столбцы, т.е.:

     ИвановИван>

    		Петрович

    Это одна строка таблицы

     

    Можно задать цвет фона для ячейки, ряда, таблицы атрибутом bgcolor

    		ИвановИванов
     Иванов