Поблагодарить:
Вторник, 02 Октябрь 2018 00:03

Основы xHTML

HTML – Hyper Text Market Language (Язык разметки гипертекста). Я специально начал заметку с расшифровки аббревиатуры, чтобы было видно, что в расшифровке нет слова «программирование». Поэтому мнение людей мнящих себя программистами только потому, что знают HTML – ошибочно. HTML – это язык с помощью которого веб-администратор указывает браузерам пользователя, как должна отображаться та или иная страница.

Следующее понятие, с которым Вам надо будет ознакомиться, является «тег». Тегом называется «команда», которая отправляется браузеру. Теги бывают двух видов, открытые и с появлением языка xHTML(об этом позже) – закрытые.

Открытый тег выглядит так:

<html> </html>

Где: <html> – открывающий тег, а следовательно </html> – закрывающий.

Закрытый:

<img src="/URL" />

Как мы видим, тег имеет элемент закрывающего тега слэш /. Но расположен он в конце тега.

Любая страница сайта, обязана иметь в себе 4 обязательных тега. Это теги: “html”, “head”, “title”, “body”.

Выглядеть код будет следующим образом:

<html>

    <head>
      <title>Заголовок страницы</title>
    </head>
    <body>
    </body>
</html>

Где, тег <html> – указывает на начало html-документа.

Тег <head> – содержит в себе основные «команды» страницы, в том числе <title>, указывающий нам заголовок страницы.

Пример содержимого:

<head>

    <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
    // Эта строка означает, что текст на странице имеет кодировку utf-8 и содержание элементов – текст и html.

    <meta name="keyword" content="азы, хтмл, html, basic" />
    // Эта строка указывает ключевые слова в тексте.

    <meta name="description" content="описание сайта" />
    // здесь описывается суть, о чём страница

    <meta name="title" content="Заголовок страницы">
    // Указывается заголовок страницы

    <meta name="copyright" content="Night_Pilgrim" />
    // Строка указывающая автора содержимого веб-страницы.

    <meta name="robots" content="index, follow" />
    // индексирование поисковыми роботами – разрешено

    <link rel="stylesheet" href="/URL/*.css" type="text/css" />
    // Строка указывающая на подключённый файл таблицы стилей CSS.

    <link rel="shortcut icon" href="/URL/*.ico" />
    // Строка указывающая на подключение файла иконки.

    <script type=”text/javascript” src=”URL/*.js” />
    // Строка указывающая на подключение файла с программным кодом JavaScript.

</head>

Стоит также отметить, что тег <style> также заключается в теге <head>.

<body> – тело документа, сюда мы пишем всё, что в итоге будет выведено на страницу. Помимо понятия «тег», есть ещё понятие «атрибут» тега, отвечающий за его «свойство». Возьмём за пример тег body:

<body bgcolor="#eeeeee;" text=”#0000ee;” link=”#ee0000;” alink=”#aa0000;” vlink=”#00ee00;” background=”URL”>

Где:

    bgcolor – цвет фона документа;
    text – цвет текста документа;
    link – цвет гиперссылки;
    alink – цвет активной гиперссылки;
    vlink – цвет посещённой гиперссылки;
    background – картинка на задний фон.
    Всё это и есть атрибуты тега body.

Также в «Основы» следует добавить «тип документа» он указывается в самом начале, ещё до тега , страница отобразится и без этого, но всё же указать не помешает.

xHTML 1.0 Strict (строгий): не содержит элементов, помеченных как «устаревшие» или «не одобренные».

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru">

xHTML 1.0 Transitional (переходный): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru">

xHTML 1.0 Frameset (с фреймами): аналогичен «переходному», но содержит при этом набор тегов для создания фреймов.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru">

xHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru">

Опубликовано в Новости Зелёной Ивы
Вторник, 28 Август 2018 09:47

Теги и атрибуты в xHTML

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

Опубликовано в Новости Зелёной Ивы

В те времена, когда я только учился программированию, добрые люди показали мне метод «OnClick», который по сей день мне кажется максимально удобным. И вот уже несколько лет я пользовался им, пока не столкнулся с делемой, что нужно, чтобы при нажатии ссылка открывалась в новом окне.

Опубликовано в Новости Зелёной Ивы

В далёкие времена, когда сайтостроение только зарождалось, некоторые вебмастера чуть ли не гордились тем, какие favicon’ы они сделали себе на сайт. Всё дело в том, что иконка представляла собой bitmap (*.bmp) файл, имея разрешение 16х16 пикселей, в очень редких случаях 32х32. Далее этому файлу меняли расширение на ico, и достаточно было просто добавить картинку в корневой каталог и во все каталоги, где находились html-файлы страниц сайта.

Опубликовано в Новости Зелёной Ивы
Четверг, 05 Июль 2018 14:59

vertical-align не работает на тег li

Работая с одним из сайтов, возникла необходимость отцентрировать по вертикали текст в списке. Всё усложнялось ещё тем, что у каждого элемента был свой собственный list-style-image. Усложнялось, потому что всякие попытки установить свойство display приводило к тому, что изображение списка просто пропадало.

Опубликовано в Новости Зелёной Ивы

Собственно с данной проблемой столкнулся, когда мне нужно было в форму обратной связи добавить перечень. И если с тегом input сложностей не возникло, то на select почему-то работать не хотел.

Опубликовано в Новости Зелёной Ивы
Вторник, 26 Июнь 2018 13:59

Как убрать рамку у img

Столкнулся с вопросом «рамки» у тега img , а точнее с тем – как её убрать, после того, как удалил атрибут src и решил прописать его через свойство стилей background-image:url всё получилось, как надо – изображение встало там, где мне было нужно, но только вот откуда не возьмись появилась рамка.

Опубликовано в Новости Зелёной Ивы

Задался вопросом создания мобильной версии на иву, и первое что сразу же смутило, что за символ такой «три полоски», как песня у Animal Jazz используется в математике и означает тождественное равенство.

Опубликовано в Новости Зелёной Ивы
Пятница, 24 Март 2017 21:59

Селекторы CSS

Работая над очередной безумной идеей, столкнулся с вопросом, что нужно было написать стили для элемента с атрибутом name. Поскольку class имел «общий» характер, а id был задействован в javascript’e и дабы исключить фактор «ой, а я и забыл, что ты у меня ещё и к css имеешь отдельную привязку» решил стиль писать по атрибуту name.

Опубликовано в Новости Зелёной Ивы
Воскресенье, 06 Сентябрь 2015 14:31

Кратко об SVG

SVG (Scalable Vector Graphic) – масштабируемая векторная графика. Я не стал создавать отдельную рубрику для SVG, хотя скорей всего нужно было, но у меня просто не будет времени настолько углублённо изучить эту систему. Поэтому все свои опыты в этом направлении я буду писать именно в xhtml потому что файлы SVG описываются по всем правилам XML и имеют разрешения *.svg и *.svgz.

Опубликовано в Новости Зелёной Ивы
Страница 1 из 2

Спонсоры: