Рейтинг@Mail.ru
    Работа \ Обучение \ Web-программирование для чайников. Урок 2. Обзор некоторых тэгов HTML».

    Web-программирование для чайников. Урок 2. Обзор некоторых тэгов HTML».

    Тема сегодняшнего урока: «Обзор некоторых тэгов HTML».



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

    Вспомним пример предыдущего урока:

    <HTML>

    <HEAD>

    </HEAD>

    <BODY>

    <font size=7><font color=red>Здесь</font> <font color=green>будет сайт-представительство </font>фирмы "Электроника в <font color=blue>быту</font>"</font>

    </BODY>

    </HTML>

    в нем мы использовали следующие тэги:

    <HTML> </HTML> - этот тэг обозначает начало файла в формате HTML.

    <HEAD> </HEAD> - заголовок. Может идти только после тэга <HTML>. Внутри тэга <HEAD> </HEAD> может идти различная служебная информация, например, название старницы, сведения о различных подключенных файла, например, если у вас есть программа, написанная на JavaScript, то ее как раз подключить можно именно в заголовке. Так же в заголовке подключается таблица стилей. Но об этом поговорим в другой раз, когда дойдем до соответствующей темы. А сейчас, давайте рассмотрим тэг <TITLE></ TITLE >. Создайте HTML файл со следующим текстом:

    <HTML>

    <HEAD>

    <TITLE>Урок 2. Изучение тэгов</TITLE>.

    </HEAD>

    <BODY>

    <font size=4>Сегодня мы изучаем тэги</BODY>

    </HTML>

    Отройте его в браузере и внимательно посмотрите в верхнюю часть окна браузера. Видите в самом верху заголовок «Урок 2. Изучение тэгов» - это работа тэга <TITLE>.

    <BODY></BODY> Этот тэг обозначает начало тела HTML-документа. Собственно говоря, внутри него идет текст, который и отображается на экране, поэтому рассмотрим его подробнее. Начну с того, что у тэгов есть еще и параметры. Давайте попробуем в нашем примере вместо <BODY> набрать <BODY bgcolor=red>. Откройте файл в браузере. Что вы видите? Фон стал красным! А теперь попробуйте вот так:

    <HTML>

    <HEAD>

    <TITLE>Урок 2. Изучение тэгов</TITLE>.

    </HEAD>

    <BODY text=red>

    <font size=4>Сегодня мы изучаем тэги</BODY>

    </HTML>

    Теперь текст стал красным, а фон снова белым. А если написать тэг <BODY> вот так <BODY text=red bgcolor=blue>? Тогда у нас будут красные буквы на синем фоне. Попробуйте так сделать, что бы убедиться.

    Можно так же сделать в качестве фона картинку. Тогда синтаксис тэга будет вот такой: <BODY background="picture.jpg">. Если картинка маленькая, то она будет повторяться, пока не заполнит весь экран.

    Теперь поговорим о цветах. Их можно задавать как названием цвета по английский, так и числом. Попробуем написать например в тэге <BODY> поставить <BODY bgcolor=FF0000>. Цвет фона будет красным. Если написать <BODY bgcolor=00FF00> - зеленым. А если <BODY bgcolor=0000FF> - синим. В общем, каждый байт трехбайтового числа задает степень насыщенности каждого из трех цветов RGB. Если вы хотите сделать, например, желтый цвет (красный плюс зеленый), то вам нужно задать вот такое число FFFF00. Что бы сделать светло-желтый достаточно увеличить степень синего цвета. Это будет число FFFF77

    Теперь перейдем к тэгу <font>. Как вы уже поняли из предыдущего урока, этот тэг управляет шрифтом. Параметр color – управляет цветом (помните, как мы разукрашивали?). В нем так же цвет можно задавать как числом, так и названием цвета по английский. Попробуем, например, открыть такой HTML файл:

    <HTML>

    <HEAD>

    <TITLE>Урок 2. Изучение тэгов</TITLE>

    </HEAD>

    <BODY>

    <font color=FF4400>Сегодня мы изучаем тэги</BODY>

    </HTML>

    И вы увидите на экране оранжевый текст.

    Теперь перейдем к параметру size. Вот пример его использования:

    <HTML>

    <HEAD>

    <TITLE>Урок 2. Изучение тэгов</TITLE>

    </HEAD>

    <BODY>

    <font size=1>Сегодня мы изучаем тэги</BODY>

    <font size=2>Сегодня мы изучаем тэги</BODY>

    <font size=3>Сегодня мы изучаем тэги</BODY>

    <font size=4>Сегодня мы изучаем тэги</BODY>

    <font size=5>Сегодня мы изучаем тэги</BODY>

    <font size=6>Сегодня мы изучаем тэги</BODY>

    <font size=7>Сегодня мы изучаем тэги</BODY>

    <font size=8>Сегодня мы изучаем тэги</BODY>

    </HTML>

    Испытайте его.

    А мы тем временем рассмотрим еще один параметр тэга <font> - FACE. Пробуйте такой пример:

    <HTML>

    <HEAD>

    <TITLE>Урок 2. Изучение тэгов</TITLE>

    </HEAD>

    <BODY>

    <font face="Arial">Сегодня мы изучаем тэги</font>

    <font face="Times New Roman">Сегодня мы изучаем тэги</font>

    </BODY>

    </HTML>

    Как вы увидели, текст стал печататься разными шрифтами, потому что параметр FACE задает наименование шрифта.

    Вы, наверное, уже заметили, что весь текст печататься друг за другом, без перевода строк. А это все потому, что мы не использовали тэг <br> - новая строка. Попробуем такой пример:

    <HTML>

    <HEAD>

    <TITLE>Урок 2. Изучение тэгов</TITLE>

    </HEAD>

    <BODY>

    Первая строка<br>Вторая строка

    </BODY>

    </HTML>.

    Теперь изучим тэг <b></b>. Он обозначает жирный шрифт. А тэг <I></I> наклонный. Тэг <U> обозначает подчеркнутый текст. Для демонстрации наберите такой пример

    <HTML>

    <HEAD>

    <TITLE>Урок 2. Изучение тэгов</TITLE>

    </HEAD>

    <BODY>

    <b>Первая</B> <I>строка</I><br><U>Вторая</U> <B><I>строка</B></I>

    <BR><I><U>Наклонная и подчеркнутая строка</U></I>

    </BODY>

    </HTML>

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


    С уважением, Александр.

    Другие уроки.



    Теги: HTML , WEB , сайт , head , body , font , size , программирование , title , face , background , color
    Смотрели:

    всего 7771 раз



    Нравится

    Комментарии: Добавить комментарий

    Пока нет комментариев.

    Добавьте ваш комментарий:

    Чтобы оставить комментарий вам нужно войти на сайт или зарегистрироваться.