Разметка и графика (Page 1)

Верстка на html 5

0

В HTML5 введены несколько новых тегов, ниже основной список:

<section>
Тег группирует похожие блоки.
section могут быть вложены друг в друга.

<header>
Содержит заголовок какой либо
секции, таблицы или страницы

<footer>
Подвал. Думаю комы излишни.

<nav>
Блок меню. Думаю тоже не требует объяснений.

<article>
Тут спектр возможностей богатый. Объясню ниже на примере.

<aside>
Можно использовать как сайдбар так и блок с комментариями.

В последних версиях всех браузеров, кроме,
IE эти элементы поддерживаются по умолчанию.

Приступим к примеру:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>Мой сайт на хтмл5</title>
    <style>
        footer{display: block} //его нужно обозначить блочным
    </style>
</head>
<body>
<header>...

Author: Dmitry Kokorin (06.11.2014 / 01:21)
Views: 1668
Comments (13) »

Графические форматы

+3

Надеюсь что кому нибудь да пригодится... Если все-же нет то не ставте минусы.=) Поехали.
( Автор данной статьи мне не известен. )
------------

" Растровая графика "

GIF (Graphics Interchange Format)
Формат GIF был разработан в 1987 году компьютерной информационной службой CompuServe. Сейчас этот формат является наиболее используемым форматом в сети Интернет.

Преимущества
Малый размер, который достигается ограниченной цветовой гаммой - не более 256 цветов.
Прозрачный фон.
Анимация.
И еще один немаловажный фактор, то что алгоритм сжатия LZW формата GIF запатентован. Владельцем патента с 1994 года является фирма Unisys, и она начала брать плату с разработчиков, использующих формат GIF.

PNG...

Author: Виталик (14.02.2012 / 03:59)
Views: 1603
Comments (1) »

Организация блочной верстки в 2 колонки

+2

Статью писал для своего сайта, но по некоторым причинам решил все свои статьи перезалить сюда (что бы не утерять)!

Часто случается такое, что заходя на сайт вначале дизайн расположен как-попало, шапка вверху, левый блок ниже шапки, блок с контентом ниже, и т.д!
в 90% случаев это следствие разметки при помощи <table>...</table>.
Что бы такого не было, желательно делать это в блоках)

Так вот, для начала укажем тип документа, и укажем все необходимое для работы со страницей!

<!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">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>My Page</title>
 </head>
 <body>
 
 </body>
</html>

...

Author: Nu3oN (16.11.2011 / 20:20)
Views: 2153
Comments (0) »

Делаем сайт на div-ах

+2

Для тех, кто уже знает что такое дивный дизайн начинаем 1-й урок по созданию сайта в формате div.
Поскольку дивный дизайн состоит не из таблиц, как табличный дизайн, а из слоёв (блоков), то и конструкция всего нашего будущего сайта будет состоять из слоёв:
<div></div>
Тег <div> является парным, поэтому каждый блок должен закрываться, например:
<div>Первый блок</div>
Хорошо, с этим понятно, теперь сделаем HTML-страничку, а кто ещё не умеет этого делать прошу начать изучать азы создания сайтов.
Создайте файл index.html и напечатайте там следующий код:

<html>
<head>
<title>Дивный дизайн</title> 
<meta http-equiv="Content-Type" content="text/html; charset="windows-1251"> 
</head> 
<body> 
<div>Первый блок</div>
</body> 
</html>

...

Author: Удаленный (17.08.2010 / 04:35)
Views: 2091
Comments (3) »

Что такое дивный дизайн

+6

Что такое дивный дизайн
Почему дивный? В HTML есть такой тег, поэтому и дизайн стали называть дивным, DIV-ный дизайн отличается от табличного тем, что в данном случае используются слои (блоки), которые располагаются на странице в определённом порядке. Порядок, положение и размеры слоёв задаёт отдельный файл style.css
На первый взгляд не видно отличия от табличного дизайна. В данном случае мы имеем три слоя, между которыми пустое пространство. В табличном дизайне нам пришлось бы делать дополнительные ячейки, чтобы разделить шапку, меню и контент.
1 - основной, вмещает в себе три остальных;
2 - шапка сайта;
3 - меню;
4 - контент;
По...

Author: Удаленный (17.08.2010 / 04:24)
Views: 2039
Comments (5) »

Разметка и графика (Articles: 5)