Уроци по HTML и CSS, урок 1

Hypertext учебник по HTML

Урок 1: създаване на HTML-страници

  1. Научете основните команди, използвани за създаване на HTML-страници.
  2. 5 упражненията в текста на урок.
  3. Изпълнение на задача контрол.
  4. Минете урока учителят устно отговаряне на въпроси и показващ всички действия на компютъра си.

В резултат на този урок ще създадете уеб-страница на RGPPU, както е показано на фигурата по-долу.

1. Структурата на HTML-документа, определението на цветовете в уеб

В допълнение към обикновен текст HTML-файл съдържа само един тип контролни структури, наречени тагове (етикети).

Tags управляват браузър при показване на уеб-страницата.

Всички тагове, за да ги отделят от съдържанието на страницата, затворени в ъглови скоби <>.

Обикновено в двойка тагове. Окончателен маркер изглежда точно като в началото, но с наклонена черта (/). Сдвоени маркери трябва да се вложени без кръстовища, т.е. И ако в зоната, открита на маркер, той трябва да бъде затворена преди близо етикет А.

Структурата на HTML-документа (виж Обява 1)

Всички HTML-документ, подписан между маркерите и . Това изисква маркер.

между маркерите и Той съдържа заглавието на документа.

Частта на глава включва тагове и . които се използват за име на документа. Това име, когато зареждането на документ се появява в заглавната лента на браузъра. Заглавието трябва да бъде кратко, информативно и на един ред.

елементът Те могат също така да съдържа и други тагове, които осигуряват връзки между различните документи и начина на изпращане на специално съобщение специфичен браузър или друга програма.

Упражнение 1.

1. Отворете уеб папката от изтегления файл, папка, разположена вътре в уеб папката и библиотека rgppu. В бъдеще всички HTML-файлове се записват в уеб директорията!

2. Отворете Notepad.

3. Вид (или копие) текста показан на Обява 1.

4. Запазване на документа в уеб папка с името fist.html. Когато запазите документ в типа на файла, за да инсталирате всички файлове (фиг. 1).

5. Затворете Notepad.

6. Идете на папка и стартирате файла с двойно кликване fist.html. Браузърът интернет страницата трябва да бъде, както следва (фиг. 2). При изтегляне на документ, описан в Обява 1, заглавната лента на браузъра показва заглавието на първата ми стъпка.

тяло документ

между маркерите и намира основната част на документа материал.

Много тагове като сдвоени и несвоен, имат качества, определящи маркер действие.

Забележка: Таблицата по-горе не включва всички атрибути за маркери . Докато ние се ограничаваме до един познат само с някои от тях.

В този пример, на фона модел на документ ще бъде image.jpg, което е папка Фонс. В този случай, на HTML-документ се съхранява в структурата на файловете на същото ниво като папка по Фонс.

Дефиниране на цветове

Когато създадете страница, трябва да работиш с избор от различни цветове и комбинации между тях. Цвят на текста се определя за HTML-документ и неговите различни фрагменти (параграфи, заглавия, бележки под линия, и т.н.). Цвят се използва за задаване на фона на документа и формата на хипервръзки. Нека разгледаме как да се определят цветовете в интернет.

При определяне на цветове за документа за HTML, можете да използвате името на цвета или шестнадесетични кодове.

Таблицата по-долу показва имената на някои цветове и техните шестнадесетичен кодове.

Маркиране цветове vweb

Например: Следващите струните са едни и същи, цвета на фона документ ще бъде червено.


2. документ ZagolovkiHTML

Елементи Н1, Н2, Н3, Н4, Н5, Н6

Допълнителна документ структуриране на тялото се извършва в рамките на елемента чрез заглавията определени елементи Н1, Н2, Н3, Н4, Н5, Н6, и други маркери.

колекторни елементи са сдвоени, така че трябва да има отвор маркер.

Упражнение 2.

  1. Създаване на HTML-документ, който въведете текста показан на Обява 2.
  2. Уверете се, че сте копирали в папката библиотека уеб папка.
  3. Запазете документа в уеб папка с името elementH.html
  4. Започнете elementH.html файл

Фиг. 3 показва как различните нива на заглавия, показвани от браузъра.

3. Подравнете Текст

ALIGN атрибут указва разположението на текста. Възможните стойности на атрибута.

Забележка: малки и големи букви идентификатори във тагове и атрибути не са взети под внимание.

Обява 3. Подреждане на заглавията

Упражнение 3.

  1. Създаване на нова HTML-документ.
  2. Въведете текста на обява 3 (за фона да използвате всяко изображение или цвят от папката библиотека / цветове).
  3. Запазете документа в уеб папка с името align.html
  4. Започнете align.html файл

Документът ви трябва да изглежда нещо подобно на това, както е показано на фиг. 4.

Разделението на текста в параграфи

свободен край

В него се посочва началото на параграфа и вмъква празен интервал, съответстващ за разделяне на това от предходния параграф. параграф таг има само един атрибут ALIGN.

приведе = "ляво" - подравняването на абзаца в левия край на текста (по подразбиране).

приведе = "дясно" - подравняването на абзаца е правилно подравнен текст.

приведе = "център" - подравняване на параграфа.

приведе = "оправдае" - привеждане в съответствие на ширината на параграф.

Насилствените паузи линия

свободен край
Тя ви позволява да мигрират останалата част от текста на параграф на следващия ред. Това несвоени маркер. За разлика от параграф маркер не се увеличава интервала в текста.

промените шрифта

свободен край и Тя ви позволява да промените интервала от типа на текста, размера на шрифта и цвета.

Умение размер = "п" се използва за определяне на абсолютната размер между 1 и 7. размер = "+ п" или -N - увеличава или намалява шрифта от текущата стойност.

Умение лицето = "NAME" - определя типа на шрифта, използван за показване на текст фрагмент. Можете да посочите няколко разделени със запетая имената на шрифтовете, в които браузърът изглежда за местната система. Използва ще бъде този, чието име се среща за пръв път.

Умение цвят = "Име" определя цвета на текста.

стила на шрифта

свободен край ... - Тя ви позволява да се показва текст с удебелен шрифт.

свободен край ... - Тя ви позволява да се покаже текст в курсив.

свободен край ... - дисплеи подчертания текст.

В този случай, ще бъдат показани на текста с курсив , но не преувеличава.

И в този случай, текстът ще бъде написан удебелен шрифт курсив .

Упражнение 4

  1. Align.html отворете файла и го запишете под ново име text_format.html в уеб папка.
  2. Промяна на кода в Обява 4 (за фона може да бъде всеки цвят от папката цветове). За да се избегне писането на ръка, можете да копирате текста от text_fomat.txt файл от уеб папка.
  3. Започнете text_format.html файл
  4. Резултатът трябва да е подобен като на фигура 5.

4. Снимки в HTML-документ

Вмъкване на изображения

Web-страници поддържат следните формати за изображения: JPG, GIF, PNG.

Снимки, използвани за поставяне на етикет . А трябва за този етикет е атрибута SRC (от английски източник - източник). Той определя пътя до файла с изображението, изображението, което трябва да се показва на уеб-страницата.

За да вмъкнете се използва команда изображение

.

Обява 5. Поставяне на изображения в Web-документ

Упражнение 5

  1. Създаване на нова HTML-документ.
  2. Въведете текста от Обява 5 (за фона да използвате всяко изображение или цвят от папката цветове).
  3. Запазете документа в уеб папка с името tiger.html
  4. Започнете tiger.html файл

Документът ви трябва да изглежда така, както е показано на фиг. 6.

5. контролни задачи

Задача: Създаване на уеб страници в съответствие с фиг. 7

  1. Всички изображения са работните места са в папката на уеб / rgppu.
  2. Предистория на уеб страници, които могат да избират уеб библиотека папка / / Фонс.
  3. Текстове, необходими за създаването на страницата, показана по-долу.
  4. Запазване на HTML-документ в уеб папка с името rgppu.html

Български държавни професионални педагогически университет (RGPPU) е основана през 1979 г. и е ръководител на висшето образование в българската система. RGPPU - е първата инженерно-педагогически гимназия в страната за обучение на началното, средното и висшето образование.

За повече от 25-годишна история на своето развитие, университетът се превърна в един от най-признатите лидери в системата на образованието на учителите и е класирана в топ пет класацията на 100 водещи български образователни институции.

В момента структурата на Институт RGPPU 3