Помоги набрать трафик, Пикабу!
Я тут недавно решил заняться таким интересным делом, как изучение HTML.
Нашел себе интересный, удобный, а главное - бесплатный хостинг, и начал им пользоваться =)
Только вот незадача - ежели за неделю не наберется определенное кол-во трафика, то его прикроют без моего ведома =С
А я очень хочу научиться веб-языку, ведь подобные вещи могут очень пригодиться =)
Ежели вам не жалко пары минут - перейдите, пожалуйста, на страницу, которая будет указана в комментариях, ибо добавление её в новость почему-то запрещено ._.
Она не забита ни чем, потому прогрузится быстро =)
Заранее - всем спасибо =)
Раздаю лучшие книги про HTML, CSS, JS, AJAX, PHP и MySQL
PHP, MySQL — 7 книг 2007, 2011-2012
Кидайте мыло — скину ссылку.
Представление мира - вещь в себе, HTML, CSS, блэк джэк
Способны ли мы познать истинную природу вещей? Что является основой нашего мира? Почему мы воспринимаем определённые вещи так, а не иначе?
Мы живём, думая, что то, что мы видим - это и есть реальное, истинное состояние окружающего мира. А что, если весь наш мир имеет чёткую структуру и вещи описаны элементарными законами и представлениями? А в голове у каждого человека находится инструкция по тому, как надо воспринимать и реагировать на "скелет" каждой вещи?
Получается, что основа мира - это HTML (разметка, структура), а в голове у нас - CSS (инструкции по представлению)!
Замечали, что разные люди смотрят на одинаковые вещи по-разному? Кому-то кажется красиво, а кому-то - безобразно. У дальтоников вообще некоторые пункты инструкции кардинально не совпадают с большинством (наверное баг закрался). Скорее всего основа мира (HTML) не меняется со временем, а меняются представления в голове людей. Например, в 19 веке основным транспортным средством были лошади, а сейчас - автомобили. Значит произошла подмена CSS-представления некого изначального элемента структуры, обозначающего индивидуальное средство передвижения.
Интересно, кто же всё это, эти инструкции, закладывает в нас? Может некое высшее существо в начале сотворило основу мира, разметило территорию и обозначило основные элементы (HTML), и, возможно, создало несколько пробных CSS-представлений (людей). И что дальше? Не может же оно следить за всем нынешним человечеством и всаживать в каждого родившегося ребёнка свои представления!
Значит есть некий алгоритм, по которому генерируются новые CSS-представления для каждого человека (и меняют их с течением жизни).
Верстальщики при создании сайтов являются по сути творцами (некое высшее существо), создающими новый мир, со строгой структурой (HTML) и описанием представления (CSS).
Есть только одно отличие - представления статичны. Не хватает алгоритма, по которому представления будут меняться со временем и модифицироваться для различных пользователей. Но кто знает, куда зайдёт прогресс через несколько десятков лет? Может и мы создадим свою вселенную с блэкджеком и шлюхами!
*написано на начальной стадии обучения веб-программированию, лет n-цать назад
Создание сайтов - путь к мечте ч.2
HTML5 - разметка сайта и структура кода
HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. Хотя стандарт был завершён (рекомендованная версия к использованию) только в 2014 году
Итак HTML5 - нужен нам для разметки страницы нашего сайта, то есть мы разделяем нашу страницу на несколько блоков, которые будут выглядеть в виде основных тегов.
Это самый простой пример структуры сайта. Он может выглядеть как угодно, все зависит от того где вы хотите расположить каждый из блоков.
А выглядит код так:
<head>
<title>Структура простой страницы сайта</title>
</head>
<body>
<header>
<!-- Шапка сайта -->
<header>
<nav>
<!-- Навигация (Меню сайта) -->
</nav>
<div id="main">
<!-- Контент сайта -->
</div>
<footer>
<!-- Подвал сайта -->
</footer>
Теперь разберем код сверху по порядку и более подробно.
Каждый HTML-документ должен начинаться с декларации типа документа или «доктайпа». Тип документа нужен, чтобы браузер мог определить версию HTML и правильно отобразить страницу.
Выглядит так: <!DOCTYPE html>
Его нужно запомнить один раз и применять его ко всем документам HTML5.
Тег <html>, он всегда закрывается таким же тегом со "слешем" </html> (парный тег).
В этом теге находится весь остальной код. Коротко и ясно, самое главное что он должен быть обязательно.
Тег <head> со своей парой </head>.
Помимо того что между тегами подключаются стили и скрипты, в этом месте есть немало важные части кода.
1. Кодировка страницы "UTF-8".
Начинается код с тега <meta> (одиночный тег) и пишется так:
Этот код нужен нам для того что бы все символы (текст) на странице отображался правильно.
Если не будет кодировки, то код будет выглядеть примерно так:
Êîãäà êîäèðîâêà äîêóìåíòà çàäàíà íåâåðíî, íåêîòîðûå ñèìâîëû îòîáðàæàþòñÿ êàê «èåðîãëèôû», à íåêîòîðûå íåò.
2. Тег <title>Название вашей страницы</title>.
Между этими тегами вы пишете название вашей страницы. Количество символов не должно превышать 60 символов.
3. Мета тег - Ключевые слова.
В атрибуте "content" пишется важная информация для поисковых систем, которая передаёт суть содержания вашей страницы.
4. Мета тег - Описание страницы.
Один из самых важных частей кода. Здесь вы описываете свою страницу и передаете её содержание. Количество символов должно не превышать 160 символов.
5. Подключение внешних стилей CSS.
Начинается код с одиночного тега <link>, задается атрибут "href" и пишется путь к фалу .css
Атрибут "rel" говорит браузеру что мы подключаем стили к нашему HTML коду.
6. Подключение внешних скриптов.
Тег <script> и атрибут "src" подключают внешний файл "JavaScript" где в атрибуте указывается полный путь к файлу. Правильно вставлять скрипты в код до закрывающегося тега </body>. Между тегами ничего писать не надо, хоть они и парные.
Подведем итоги:
Между тегами <head></head> пишется не маловажная информация. Это в принципе все что связано с этими тегами. Посмотрим как выглядит код полностью.
<meta charset="UTF-8">
<title>Структура HTML кода</title>
<meta name="keywords" content="Ключевые слова">
<meta name="description" content="Описание страницы">
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
Далее разберем тег <body> и что в него входит.
Постскриптум:
Предыдущий мой пост был достаточно провален, из комментариев взял полезной информации и учел её в этом посте. Останавливаться не буду так как делаю для себя и для нескольких подписчиков (может в будущем будут еще).
Спасибо за внимание. Для вас старался Александр с мечтой делать сайты самостоятельно.))))
Варианты использования вертикальных медиа-запросов в css
Мало кто знает, что в глубинах CSS спецификаций, кроме привычных «горизонтальных» медиа запросов, например, max-width: 768px, существуют ещё и «вертикальные». Примеры их использования не так очевидны, поэтому я решил поделиться с Вами статьей, в которой я опишу несколько практических ситуаций, в которых без таких запросов не обойтись.
Две недели назад, Sara Soueidan написала о «любви» к вертикальным медиа запросам, и тут я вспомнил, что и сам использовал их в некоторых проектах, и задумался над тем, почему бы не написать об этом статью? Так сказать поведать дорогим пользователям Пикабу о своем опыте использования вертикальных медиа запросов.
Да-да, все мы любим медиа-запросы. И не говорите что это не так. Без них наш дизайн сайтов не будет таким отзывчивым, каким мы привыкли видеть его на современных интернет ресурсах. Все мы знаем о таких медиа-запросах как min-width и max-width и о том, в каких случаях они применяются. В данной статье я рассмотрю различные случаи использования min-height.
1. Секции
Иногда дизайнер делается такие веб-страницы, которые разделены на несколько разделов, каждый из которых должен занимать всю высоту в области просмотра. В CSS это можно сделать с помощью относительных единиц измерения «Viewport Units» vh, vw, vmin, vmax. Подробнее об единицах измерения можете прочитать здесь. Бывает, что одна секция содержит контент, который почти заполняет область просмотра, а другая секция содержит избыточное количество контента, который переполняет и выходит за грани секции, тем самым перекрывая другое.
Проблема в том, что мы применяем 100vh только если высота больше указанного значения.
@media (min-height: 400px) {
.section {height: 100vh;}
}
Теперь в секции, высота по умолчанию будет определяться содержанием внутри него, и если высота области просмотра меньше чем 400px и ширина больше 500px, то высота будет ровняться 100vh (100% области просмотра).
2. Фиксированная шапка
Фиксированные хедеры (header) очень популярны. Мне же лично они не нравятся, потому что оставляют мало место на экране, находясь в «состоянии покоя», особенно если высота таких хедеров достаточно велика. Например, на мобильном устройстве итак не так уж много место, и можно было бы убрать фиксацию хедера. В моем примере я сделал фиксацию хедера только в том случае, если видимая область больше 600px, во всех остальных случаях хедер не будет фиксированным. Меньше слов — больше примеров!
@media (min-height: 600px) {
.site-header {position: fixed;}
}
3. Фиксированный подвал сайта (Sticky footer)
С футером дела обстоят точно так-же. Когда у Вас есть фиксированный футер в дизайне Вашего сайта и Вы хотите сделать так, чтобы при прокрутке на экранах с высотой менее 600px он перестал быть фиксированным, опять таки воспользуемся min-height
@media (min-height: 600px) {
.promotion-bar {position: fixed;}
}
4. Модальное окно
Как правило модальное(диалоговое окно) должно быть расположено по центру экрана. Цель этого в том, чтобы как можно больше привлечь внимание пользователя. К сожалению, на небольших дисплеях просмотр модального окна бывает не всегда удобен, так как верхний и нижний край могут быть очень близко расположены к вертикальным краям экрана. В этом случае лучше сделать модальное центрирование только по вертикали, оно будет прилипать к верхней части окна.
.modal {
position: absolute;
left: 50%;
top: 30px;
transform: translate(-50%, 0);
}
@media (min-height: 800px) {
.modal {
top: 50%;
transform: translate(-50%, -50%);
}
}
Поиграем в бизнесменов?
Одна вакансия, два кандидата. Сможете выбрать лучшего? И так пять раз.
5 Flexbox методов, о которых вы должны знать
Flexbox является стандартом CSS, оптимизированным для проектирования пользовательских интерфейсов. Используя различные свойства Flexbox мы можем построить нашу страницу из небольших блоков, которые затем с легкостью сможем перемещать и изменять размеры, как нам угодно. Адаптивные веб-сайты и приложения пользуются огромным спросом в нынешней веб-индустрии.
В этой статье я хочу показать вам пять flexbox методов к решению проблем компоновки при верстке. Также я приведу практические примеры для демонстрации, в которых применяются эти методы.
1. Создание столбцов с одинаковой высотой
На первых порах, это может показаться не трудной задачей, но делать столбцы, которые имеют одинаковую высоту, иногда бывает сделать очень «геморройно». min-height в данном случае использовать будет не практично, так как с увеличением количества контента, находящегося в блоке, так же будет и увеличиваться его длина.
Flexbox не видит в этом проблемы. Все, что нам нужно, так это инициализировать гибкую модель. Обязательно убедитесь, что flex-direction и align-items имеют значения «по умолчанию».
div class="container">
.container{
display: flex;
flex-direction: row; /*Пункты внутри контейнера будут располагаться горизонтально*/
align-items: stretch; /*Пункты внутри контейнер будут принимать всю его высоту*/
}
2. Изменение порядка
Некоторое время назад, если бы мне пришлось динамически изменять порядок некоторых элементов, я, вероятно, попробовал бы некоторые CSS хаки, но потом бросили бы эту затею и в расстройстве сделали бы это с помощью javascript. С flexbox же эта задача сводится всего к применению всего лишь одного свойства СSS.
Это свойство называется order. Оно позволяет мне менять любое количество flex элементов и изменять их последовательность, в которой они появятся на экране. Этот параметр представляет собой целое число, определяющее положение элемента — более низкие числа означают больший приоритет.
<div class="blue">...</div>
<div class="red">...</div>
<div class="green">...</div>
.conteiner{display: flex;}
/*Обратный порядок элементов*/
.blue{order: 3;}
.red{order: 2;}
.green{order: 1;}
3.Горизонтальное и вертикальное центрирование
Вертикальное центрирование в CSS является одной из тех проблем, которые заставляют нас спросить себя: Как такую тривиальную вещь до сих пор так сложно сделать? И это на самом деле так. Если посмотреть в Google вертикальное центрирование CSS, то в результате поиска выскочит бесконечное количество различных методов, большинство из которых будут включать в себя таблицы и преобразования. которые предназначены для изготовления макета.
Flexbox предлагает более простое решение этой проблемы. Каждый гибкий макет имеет два направления на оси (X,Y) и два отдельных свойства для их выравнивания. Мы можем позиционировать любой элемент прямо в середине родительского контейнера.
<div>...</div>
.container{
display: flex;
justify-content: center; /*Центр по главной оси*/
align-items: center; /*Центр по вспомогательной оси*/
}
4. Создание полностью отзывчивой сетки (Responsive Grids)
Большинство разработчиков полагаются на готовые CSS фреймворки при создании адаптивных сайтов. Bootstrap является наиболее популярным, но есть и сотни других фреймворков, которые помогут вам справиться с этой задачей. Как правило, они хорошо работают и имеют множество опций, но имеют тенденцию быть довольно тяжелыми. Если вы все хотите сделать своими руками и вам не нужных громоздких фреймвокров, тогда Flexbox именно для вас!
Строка flexbox сетки представляет собой простой контейнер с display: block;. Внутри горизонтального столбца может быть любое количество элементов, размер которого устанавливается с помощью Flex. Гибкая модель адаптируется под размер окна браузера, так что эта схема должна отлично выглядеть на всех устройствах. Тем не менее, если все таки не хватит места на экране по горизонтали, то мы сможем решить эту проблему с помощью медиа-запроса.
<div class="col-1">...</div>
<div class="col-2">...</div>
<div class="col-1">...</div>
.container{display: flex;}
.col-1{flex: 1;}
.col-2{flex: 2;}
@media (max-width: 800px){
.container{
flex-direction: column;
}
}
5. Создание идеального Sticky Footer (прилипающий футер)
Flexbox имеет простое решение этой проблемы. Применение display: flex; к тегу body позволяет построить весь наш макет страницы, на основе свойств Flex. Да чего я все говорю, да говорю? Давайте уже лучше посмотрим на практике.
<div class="main">...</div>
<footer>...</footer>
html{height: 100%;}
body{
display: flex;
flex-direction: column;
height: 100%;
}
.main{
/*Основной раздел будет занимать все свободное место на странице*/
flex: 1 0 auto;
}
footer{
/*Футер будет занимать столько места по вертикали, сколько и должен и не пикселя больше */
flex: 0 0 auto;
}
Вывод
Все браузеры (кроме IE 9) теперь поддерживают режим Flexbox. Если вы не использовали Flexbox до этого момента, то я рекомендуем Вам попробовать.
Надеюсь, что мои советы CSS были для вас полезны и что они помогут вам создавать более качественные и более адаптивные макеты.
Жду ваших комментариев по этому поводу.
Вы так же можете читать мои статьи здесь