Читати попередній матеріал
Отже, перша сторінка створена. Далі, щоб було простіше пояснити, робимо так: створюємо ще одну сторінку в блокноті (Notepad) і зберігаємо її в тій же папці де лежить сторінка index.html і називаємо її, наприклад next.html.
Тепер відкриваємо цю нову сторінку в блокноті і вставляємо туди ось цей код:
Отже, ми створили дві статичні HTML сторінки. А тепер давайте розберемо по порядку все нові теги, атрибути і значення.
Почнемо з першої сторінки:
тег
- (Показаний в реальну величину) створює заголовки Першого рівня.
Всього 6 рівнів заголовків і Перший - найбільший за розміром. Також в нашому прикладі цей тег містить ще атрибут align = "" в лапках стоїть параметр center. Цей атрибут дозволяє вирівнювати весь заголовок по центру, вліво або вправо відповідно змінюючи параметр в лапках атрибута на left або right.
Слідом за тегом заголовка йде тег - цей тег відповідає за форматування тексту в HTML сторінці. Сам тег по собі нічого не означає, однак завдяки атрибуту color = "" поставивши потрібне значення (в нашому випадку це red) можна змінити колір тексту, а за допомогою атрибута face = "" (в нашому випадку це Tahoma) можна змінювати накреслення шрифту.
При створенні сайтів краще використовувати такі шрифти як Arial, Tahoma, Verdana. Це ті шрифти, які за умовчанням є у всіх версіях Windows. Дивимося далі за кодом: тег
- дозволяє робити абзаци в тексті там, де вставлений цей тег. Даний тег містить такий важливий атрибут як align = "" який також дозволяє зрушувати текст - вправо вліво по центру.Наступний тег - - дозволяє зробити текст, укладений в цей тег, жирним.
Якщо ж картинка лежить на комп'ютері і в тій же папці де лежать html сторінки - то пишеться так
Також обов'язково вказати розміри картинки - ширина width = "" і висота height = "". Атрибут align = "" вирівнює картинку, в нашому випадку вліво, а текст відповідно буде обтікати картинку справа.
Але щоб картинка не прилипала до тексту потрібно зробити відступи hspace = "" - зверху / знизу (в лапках розмір вказується в пікселях) і vspace = "" - правою / лівою. Атрибут alt = "" необов'язковий, але краще його використовувати, допомагає пошукової оптимізації. Цей атрибут задає назву картинки, яке користувачеві не видно, але його розуміє браузер і пошуковий робот.
Також між тегами
можна помістити парний тег який дозволяє робити текст курсивом.Наступний тег -
- містить в собі атрибут type = "" який задає тип маркованого списку. У нашому випадку це квадратики. Щоб створити нумерований список замість тега
- ставимо тег
Атрибут target = "_ blank" дозволяє при натисканні на посилання перемикати відкривається сторінку на нову вкладку браузера. І ще один атрибут title = "" який відповідає на позначення посилання, назва, яке буде зрозуміло браузеру і пошуковому роботу.
Є ще один тег, який дозволяє робити перенос тексту на новий рядок. одиночний тег
дозволяє робити перенос в будь-якому місці, де буде стояти цей тег.
Також хочу додати, що у тега