Категории:

  • Программирование


  • Изобразительное искусство


  • Программирование встраиваемых систем


  • Компьютерная графика


  • WEB Разработка


  • Музыка


  • Инженерия


  • iVARIOUS


  • Mobil App


  • HTML. Общее

    Теперь приступим к HTML разметке, ее мы будем редактировать в бесплатной и удобной программе Brackets, можно и в простом блокноте, сохранив документ в расширении html (обратите внимание, блокнот windows может сохранить ваш документ как например index.html.txt, а не просто index.html, так браузер откроет ваш проект как простой текст ).
    Начинается страница с заголовка head и тегов, в которых хранится информация о странице для браузера и поисковиков.
    Для начала запишем строчку с тегом link , в котором укажем путь к файлу со стилями, в которых будут хранится описания визуального вида ваших элементов на странице.
    В общем картина выглядит так:

    <!--Таблица стилей, отдельный файл layout.css-->
    #iVARIOUS {
    color: red;
    }

    #iVARIOUS a{<!--Обращение конкретно к ссылке - отобразить в зеленом цвете -->
    color: green;
    }



    <!--Главный файл, с именем index.html-->
    < html >

    < head >

    < link rel='stylesheet' type="text/css" href="layout.css"> <!--Адрес файла с описанием стилей-->

    </head>

    < div id="iVARIOUS"> <!--Выделение фрагмента страницы с именем iVARIOUS-->

    <li> iVARIOUS.COM</li> <!--Текст-->

    <li> <a href="www.ivarious.com"> iVARIOUS.COM</a> </li><!--Текстовая ссылка-->

    <li> <img src="images.jpg"> </li> <!--Картинка-->

    <li> <a href="www.ivarious.com"> < img src="images.jpg"> </a></li><!-- Ссылка в виде картинки-->

    </div> <!-- Конец фрагмента страницы с именем iVARIOUS-->

    </html>

    Главные, и самые нужные теги при организации страницы HTML это <div> и <span>, они являются чем то вроде - контейнерами, или блоками, на которые разделена страница. Само слово DIV есть сокращение от английского "разделять", чем добиваются максимального визуального разнообразия, применяя к конкретному div свой особенный визуальный стиль.
    Если div он есть чем-то вроде вертекальной организации, то span его аналог по горизонтальному расположению блоков. Также в примере фигурирует тег <li>, выстраивающий элементы на странице в виде списка.
    Стили CSS применяются к div с #названия и описания в скобках {}. Если нужно применить какой-нибудь стиль конкретно чему-то, входящему в div, нужно всего лишь после имени div написать имя тега, например обращение к ссылке внутри div id="iVARIOUS":
    #iVARIOUS a{...}


    HTML
    Важно еще понять сразу: в html - все применяется практически ко всему. В примере есть картинка, а под ней картинка/ссылка, если на картинку/ссылку нажать , браузер пользователя отправит по нужному адресу. Для того чтоб делать картинки ссылками, нужно в описании ссылки просто вставить код картинки, если в описании ссылки только текст - ссылка будет текстовой.

    Читайте больше в категории: WEB Разработка

    2016-03-08 12:31:30



    Другие статьи:

    PHP. Введение

    WinAPI. Кнопки Управления Графиком функций.

    Некоторые особенности разработки. Заключение

    Java. Перегрузка методов и конструктров

    Maya. Loft и Revolve

    Maya. Материалы и Mental Ray

    PHP. Строки. Переменные в строках

    HTML. Таблицы

    Java. Классы и Обьекты

    Java. Ввод данных с клавиатуры