первая лекция по HTML
advertisement
Структура HTML-документа Итак, HTML (Hyper Text Markup Languich) - язык разметки гипертекста Гипертекст – текст, связанный по смыслу и с помощью гиперссылок. Web-страница-документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера. Web-сайт-совокупность связанных между собой тематикой и гиперссылками страниц. Каждый HTML-документ, состоит из тэгов, с помощью которых и создается он и в последствии web-страница. Тэг-элемент HTML, представляющий из себя текст, заключенный в угловые скобки <>. Тег является активным элементом, изменяющим представление следующей за ним информации. Тег может иметь некоторое количество атрибутов. Обычно используются два тега - открывающий и закрывающий. Ну, вот разобравшись с основными определениями, связанными с HTML можно перейти к изучению структуры, все дополнительные материалы будут изучены дополнительно в последующих лекциях. Вот HTML-код вашей первой страници, который мы сейчас разберем, и так же будет показано ее выполнение этого кода. Так же в этой лекции будет много работ, и вы познакомитесь со многими тэгами. Ну, вот и ваша первая страница: <html> <head> <title>первая страница</title> </head> <body bgcolor=red> <h1 align=center>Всем привет!!!</h1> </body> </html> Ну а вот соответствующие выполнение и тогда последует разбор: Начнем. Тэги в HTML записываются в вот таких скобочках <тэг>.Тэги бывают открывающиеся(<тэг>.) и закрывающиеся(</тэг>.).Большинство тэгов в HTML после открытия требуют закрытия, т.е. идут парами: открывающийся-закрывающийся).Но вот до конца разобравшись, что такое тэг можно рассмотреть обязательную структуру HTML-документа - это обязательно тэг HTML, объявляющий HTML-документ(этот тэг должен быть и открывающимся и закрывающимся).Также еще должен быть тэг <head> - это тэг, объявляющий контейнер HEAD, в котором хранится служебная информация скрипты, стили заголовок страницы,…но об этом позже, (он тоже должен быть парой). Теперь перейдем к тэгу TITLE. Этот тэг – тэг заголовка, который в строке заголовков браузера (синем полев самом верху окна), он так же парный, и находится в контейнере HEAD, я говорил об этом, когда рассказывал про контейнер HEAD.Теперь обязательный тэг BODY, но jy выглядит так <body> …</body>, bgcolor=red – это атрибут тэга BODY, о котором я расскажу позже и вообще об атрибутах. Еще тэг <body> - это контейнер, такой же как и HEAD, но там хранится описания всего окна страницы т.е того что выделено красным на примере. Но вот перейдем к атрибутам. Атрибут тэга – это дополнительное описание к тэгу. Но вот примере в тэги <body>, который объявляет тело страницы, т.е полу, на котором всё располагается есть атрибут bgcolor=red, это отрибут, задающий красный цвет фона страници. Атрибуты тэга записываются <тэг атрибут=”параметр”>. Параметр атрибута – это то значение, которое приобретает атрибут, тем мамым добавляя дополнительное описание к тэгу. В данном случае атрибутом будет bgcolor, а параметром будет red.В данном случае хочется еще рассказать про правила задания цвета в качестве параметра атрибута тэга в HTML. Итак, цвет может задаваться двумя способами: 1.с помощью кода цвета, который можно взять в растровых графических редакторах таких как Photoshop или paint. Задается это так:#код цвета(напимер bgcolr=#e82323 – это оттенок красного цвета) 2.словом, пишется в кавычках английское слово(напимер bgcolor=”green”). По умолчанию стоит белый цвет, для фонов и черный для текста. Пока это только один атрибут тэга <body>, который нужно запомнит, но их будет еще много, и не только для <body>. Теперь рассмотрим что там внутри контейнера BODY. Внутри контейнера тэга BODY идут все возможные тэги, которые и создают всю страницу.В данном случае это только тэг заголовка. Рассмотрим тэг <h1>. <h1…6>-это тэги заголовка, почему там 6 цифр? там идет по-прежнему заголовок, но с уменьшением величины шрифта, т.е чем выше номер, тем меньше шрифт. и вот все 6 тэгов заголовков <h1> <h2> <h3> <h4> <h5> <h6> А теперь рассмотрим атрибуты этого тэга, всё-таки не смотря на 6 вариаций считается как один. Атрибут align, который приведен в коде – это выравнивание( по центру(center), по правому краю(right, который стоит по умолчанию), по левому краю(left)). Но вот мы разобрали одни из основ HTML. Но в этой лекции мы пойдем еще дальше и изучим еще несколько тэгов, код предлагается написать самому по данному скриншоту. Но сначала мы изучим необходимые тэги, которые были использованы на этой странице часть тэгов будет использовано частично, т.е. изучена будет только часть параметров и атрибутов тэга но я считаю необходимым изучить эти тэги. Итак начнем с тэга <hr>, который мы изучим полностью. Ну вот тэг <hr> - это тэг, который объявляет линию на странице, как видно на их три. Начнем с его атрибутов: Align Color Noshade Size Width Итак, с параметрами атрибутов align, color вы уже знакомы, и поэтому они общие для всех, и это значит, что их можно посмотреть выше и запомнить их, потому что они используются в большинстве тэгов. Но теперь к атрибуту noshade.Этот атрибут отменяет 3D эффекты линии. Он используется по умолчанию и не имеет параметров. Теперь к атрибутам size и width.Итак атрибут size устанавливает толщину линии, она может задаваться в пикселях. Атрибут width устанавливает ширину линии. В данном случае она задается только в пикселях или процентах. Но вообще она to задается в пунктах(как высота текста) .Итак в пикселях понятно – это величина линии как изображение в точках. В процентах длина задается в количестве процентов от окна браузера . Начнем изучение нового тэга, который позволяет форматировать текст, все эти тэги, и тот тэг который мы сейчас будем изучать частично этой лекции, будут изложены в лекции:»форматирование текста в HTML», ну начнем со сложного тэга, но здесь рассмотрим всего 2 атрибута и параметры этих атрибутов, об остальном позднее. Итак, после интриги этот тэг есть тэг <font>, вот его атрибуты:color, face.Параметры атрибута color значение атрибута применяется везде и рассматривать я его дальше не буду, а просто буду называть, что у данного тэга имеется этот параметр и все. Теперь к параметру face.Атрибут face устанавливает шрифт текста после этого тэга. Этот тэг требует закрытия. Параметр атрибута записывается в кавычках после знака равно, рассмотрим на примере тэг <font>. <html> <head> <title>oleggolen</title> </head> <body bgcolor=magento> <h1 align=right><font color=silver face=” Monotype Corsiva”>Олег</font></h1> </body> </html> В данном случае Итак, я думаю из примеров понятно как используются тэги HTML и домашним заданием будет повторить скришот, у которого не дан код, а также в справочнике htmlbook прочитать про тэги body, html, head, title, hr, h1…6, font, I,b. У тэгов читать все атрибуты, но выучить пока только те, которые использовались в лекции, а последние тэги будут еще встречатся в лекции “форматирование текста в HTML”, но они просты в изучение, не имеют атрибутов и поэтому я предлагаю их на самостоятельное изучение, а потом повторение в выше указанной лекции. Спасибо за внимание!
