Рубрики
Утилиты

Saubere HTML aus Word-Dokument

HTML Cleaner ist ein Dienst zum Entfernen von HTML-Tags aus dem “Papierkorb”, der nach dem Speichern der Seite im HTML-Format aus MS Word im Dokument verbleibt.

html-cleaner

Der Code wird durch Iteration der eingegebenen Symbolzeile gereinigt, aus der eine neue Zeile gebildet wird, die “sauberen” Code enthält. Das Plugin entfernt absolut alles von Tags, einschließlich HTML5-Tags. Es setzt den Schrägstrich auf ungepaarte Tags. Leere Tags werden entfernt, beispielsweise das Konstrukt <p></p> wird gelöscht, weil es nichts enthält.

Wie funktioniert HTML Cleaner?

Es gibt zwei Möglichkeiten:

  • Wählen Sie die Daten aus dem MS Word-Dokument aus, die Sie aus dem Papierkorb entfernen möchten. Um alles auszuwählen, drücken Sie Ctrl + A / Cmnd + A (für Mac). Fügen Sie den kopierten Text in das Feld darunter ein (die Registerkarte “MS Office-Daten einfügen” sollte ausgewählt sein), klicken Sie auf die Schaltfläche “Fertig stellen”.
  • Wählen Sie vor der Codeoptimierung in Word “Speichern unter …” aus, geben Sie den Dateityp “Webseite mit Filter” an und öffnen Sie die gespeicherte Datei in einem Texteditor. Kopieren Sie den Code und fügen Sie ihn in das Feld darunter ein. Die Registerkarte “HTML einfügen” sollte ausgewählt sein. Klicken Sie auf Fertig stellen.

Als Ergebnis erhalten Sie reinen HTML-Code.

Die folgenden Attribute bleiben erhalten:

colspan, rowspan, href, src, type, value, lang, tabindex, title, code, alt, target, dir, span, action, method, style

Vergessen Sie nicht, Ihre Kommentare zu hinterlassen, die mir helfen, Fehler zu korrigieren oder Verbesserungen vorzunehmen.

Рубрики
Утилиты

HTML-cleaner

HTML Cleaner is a service for cleaning html tags from “trash” that remains in the document after saving the page in html format from MS Word.

html-cleaner

The code is cleaned by iterating of entered symbols line from which a new one is formed containing “clean” code. The plugin removes absolutely everything from tags, including html5 tags. It puts the slash to unpaired tags. Empty tags are removed, for example the construct <p></p> will be deleted because it contains nothing.

How does html cleaner work?

There are two ways:

  • Select the data from MS Word document that you want to clean up of trash. To select everything press Ctrl + A / Cmnd + A(for mac). Paste the copied text in the field below (the “Insert MS Office data” tab should be selected), click the “Finish” button.
  • Before the code optimizing select “Save As …” in Word then specify the File Type “Web Page with Filter”, then open the saved file in a text editor. Copy the code and paste it into the field below. “Paste HTML” tab should be selected. Click Finish.

As a result, you will get pure html code.

The following attributes remain intact:

colspan, rowspan, href, src, type, value, lang, tabindex, title, code, alt, target, dir, span, action, method, style

Do not forget to leave your comments which will help me correct errors or make improvements.

Рубрики
FrontEnd

CSS анимация HTML без картинок

В данном уроке я покажу как работает CSS анимация и как ее сделать, используя только HTML и CSS без использования JavaScript и изображений. CSS анимация – это когда мы с помощью свойств стилей заставляем HTML блоки изменять свои характеристики положения, размера и цвета.

Рубрики
Утилиты

Автоматическая очистка HTML кода от “мусора”

HTML Cleaner – сервис очистки html тегов от “мусора”, который остается в документе после сохранения страницы в формате html из программы MS Word.

Рубрики
FrontEnd

Урок: блоки в одну строку CSS

Для того, чтобы выстроить блоки в одну строку с помощью CSS необходимо понимать, что выстраиваемые блоки представляют собой не просто какие-то разрозненные блоки, а группу. Понимая это необходимо объединить их. Объединение осуществляется с помощью заключения всех блоков в какой-то другой блок, который будет “родительским” по отношению к этой группе.

Рубрики
Backend

Использование PHP для сайта-визитки, разделение на модули

Описанный далее метод безусловно рабочий и может применяться всеми, от новичка до профессионала, тем более, что метод правильный, но данная статья написана специально для тех, кто постигает азы создания сайтов. Тем самым я говорю, что людям с опытом, данная статья может показаться бессмысленной, но все когда-то и с чего-то начинают.

Зачем вообще использовать PHP в создании сайтов? Даже если вы не являетесь программистом и делаете сайт исключительно для себя, то со временем сайт будет расти и шириться. Так бывает всегда и у всех. Все и всегда сталкиваются с одной и той же проблемой – при добавлении нового раздела сайта, а следовательно и нового пункта меню, нужно, что бы измененное меню появилось на всех страницах сайта. Все прекрасно, когда вы используете CMS, измененное меню “само собой” появится на всех страницах сайта, но как быть, если вы, по какой-то причине, использовали статические страницы, сохраненные с расширением *.html? Такое бывает довольно часто, даже в наше время, когда, казалось бы, все используют различные CMS.

Отличным решением проблемы будет разделение страницы сайта на модули.

В этом случае есть два, наиболее простых, варианта решений:

  • использовать SSI
  • использовать JavaScript
  • использовать PHP

Первый способ, с использованием SSI можно обнаружить по следующему адресу:

SSI в примерах

Второй способ будет описан на данном сайте позднее.

Третий способ, с использованием PHP рассмотрим далее.

Использование PHP при разделении страницы сайта на модули:

Во-первых, для того, что бы использовать возможности языка PHP ваш хостинг должен предоставлять такую услугу, во вторых файлы, которые будут содержать инструкции PHP должны иметь расширение *.php и в третьих, инструкции, внутри файла должны быть заключены в конструкцию:

<?php /* ВАШ КОД */ ?>

С помощью PHP можно подключить файл как обычную функцию, при этом содержимое файла будет обработано как если бы он был автономным PHP сценарием. При этом все функции, определенные в подключаемом файле можно использовать как внутри файла в котором происходит подключение, так и в любых других подключенных файлах. И называется эта функция include.
При разработке простого сайта-визитки удобно разделить уже сверстанный макет сайта на логические части/модули. Например можно разделить макет на три части: header, footer и content. В первых двух модулях будут содержаться куски HTML кода, которые на всех страницах сайта изменяться не должны, что логично, ведь дизайн должен быть неизменным во всех разделах сайта. Изменяться будет только та часть, которая содержит контент.
Во-первых данный подход существенно снижает риск допустить ошибку верстки, так как готовые файлы header и footer уже не будут подвергаться изменениям, а во-вторых, при внесении изменений в дизайн достаточно будет изменить только два файла, не затрагивая файлы содержащие контент, это особенно актуально, когда ваш сайт содержит хотя бы более десяти страниц.

В своем примере я разделил сайт на четыре модуля. В одном файле я буду хранить функции, которые стану использовать на сайте, в других двух файлах будет часть до и после контента и третья часть – контент.
При этом я буду загружать нужный контент динамически, точнее за меня это сделает PHP.
Мой основной файл, index.php, будет содержать следующий код:

<?
include 'functions.php';
include 'header.php';
include page_name().'.php';
include 'footer.php';
?>

Сперва я подключил файл содержащий функции, затем все остальное. Поскольку PHP язык линейный, то я подключаю файлы, содержащие части верстки в той последовательности, в которой они были изначально, до разделения.
Вы заметили, что я использую функция page_name(). В данной функции я определяю – какой файл запросил пользователь и подключаю его.
Код данной функции выглядит следующим образом:

function page_name() // функция определяет какой файл подключить в части контента
{
$page = $_GET['p']; // получаем значение переменной из строки адреса
if($page==''){$page = 'main';} // если значение не указано, значение переменной page устанавливается равным main
return $page; // возвращаем значение переменной page
}

 

Сперва функция получает из строки адреса имя файла, который следует подключить в части контента. Эти данные попадают в адресную строку при клике по ссылке, в меню, так как я указываю такую конструкцию:

<a href="/">Главная</a>
<a href="/?p=about">Обо мне</a>
<a href="/?p=contacts">Контакты</a>

 

То есть в строке адреса содержится информация о том, что некая переменная p имеет значение равное тому, что идет после знака “равно”. Соответственно при клике на ссылку “Обо мне” пользователь перейдет в корень сайта(на главную страницу) и в строке адреса будет передан параметр p со значением about, поэтому вместо текста, главной страницы пользователь увидит текст страницы “Обо мне“, а при клике на “Контакты“, значение будет равно contacts и текст страницы будет соответствующим. В первой строке функции как раз говорится, что:  нужно получить значение переменной p из адресной строки и поместить это значение в переменную $page.

Как мы видим, ссылка на главную не содержит никаких параметров, но тем не менее необходимость подгрузить какой-то контент остается и для этой цели применяется условный оператор, который помещает в переменную $page значение равное слову “main“. Затем функция возвращает результат своей работы, а именно возвращает значение переменной $page, которое подставляется в то место, где была вызвана функция, а именно в 4-ю строку файла index.php, в которой загружается соответствующий файл. Для главной, при отсутствии параметров, main.php, для “Обо мне” – about.php , для “Контакты” – contacts.php.

Выделение активного раздела

Для того, что бы выделить тот раздел который в данный момент просматривается достаточно добавить к ссылке какой-нибудь класс, который будет визуально изменять эту ссылку. Для того, что бы добавить класс можно написать функцию:

function current_page($link='') // функция опреляет страницу, которая отображается в данный момент
{
$page = $_GET['p']; // получаем значение переменной из строки адреса
if($page==$link) // если значение переменной page равно значению переменной link...
{
return ' class="current"'; // возвращаем указанную строку
}
}

Данная функция точно так же получает из адресной строки значение переменной p, а за тем сравнивает это значение с тем, что было передано в функцию в качестве ее параметров и если эти значения совпадают, то функция возвращает строку, содержащую конструкцию определяющую атрибут класса в html.

<a href="/">Главная</a>
<a href="/?p=about">Обо мне</a>
<a href="/?p=contacts">Контакты</a>

Далее, значение, возвращаемое функцией, выводится в том месте, где эта функция была вызвана.

Предположим, что пользователь просматривает раздел “Обо мне“, значит в адресной строке находится нечто следующее: http://mysite.ru/?p=about и следовательно программа обработчик идя по коду и встречая на своем пути PHP код делает проверку. Когда обработчик встречает функцию без параметра – current_page() он сверяет то, что в адресной строке и то что передано в функцию в качестве параметра. Поскольку в адресной строке значение p чему-то равно, то в данном случае функция ничего не возвращает. Затем следует та же функция, но уже с параметром, равным “about” и сравнивая это значение со значение в адресной строке оказывается, что значения равны и следовательно функция возвращает строку  class="current", таким образом получается, что при просмотре HTML кода страницы мы увидим, что для ссылки на раздел “Обо мне” определен класс – <a href="/?p=about" class="current">Обо мне</a>. Ну и в последнем случае, когда встречается функция current_page('contacts'), она ничего не возвращает, так как значение параметра функции не соответствует значению переменной из адресной строки.

Это простейший вариант решения задачи. Так как в примере используется всего три пункта меню, решение было “в лоб”, но если пунктов меню больше, то удобней использовать цикл, для вывода меню.

Пример такого цикла приведен ниже:

function menu()
{
// формируем массив, состоящий из имени файла и соответствующего названия раздела
$menu = array(
'main' => 'Главная',
'about' => 'Обо мне',
'contacts' => 'Контакты',
);
$out = ''; // обнуляем переменную, которая будет содержать сформированный код меню
foreach($menu as $url=>$name) // начинаем перебор массива
{
if($url==$_GET['p']||($_GET['p']==''&&$url=='main')) // сравниваем значение текущего элемента массива с параметром из адресной строки
{
// значение текущего элемента массива соответствует значению переменной из адресной строки
$current = ' class="current"'; // значение переменной равно строке определяющей класс
}else
{
$current = ''; // значение переменной пусто
}
if($url<>'main') // проверяем, является ли значение текущего элемента массива соответствующим строке 'main'
{
$url = '?p='.$url; // если нет, то ссылка будет иметь указанный вид
}else
{
$url = '?'; // если да, то нужно ссылаться на корень сайта
}
$out .= '<a href="'.$url.'"'.$current.'>'.$name.'</a>'; // формируем ссылку соответствующую текущему элементу массива и дописываем ее к уже сформированной строке
}
return $out; // возвращаем сформированную строку
}
print menu(); // выводим результат работы функции

Разумеется, для того, что бы не возникало ошибки, на сервере должны быть файлы, которые имеют имена в соответствии с использованными параметрами.

Рубрики
FrontEnd

Выравнивание – блок по вертикали

По поводу того, как выравнивать блок по вертикали написано масса материалов и статей, но самым простым способом является использование решения, которое будет работать везде. И все благодаря CSS 3.

Помимо свойства display: table появилось есть свойство display: table-cell и именно комбинацию этих двух свойств мы будем использовать.

Схема работы очень проста – создается главный блок со свойством display: table, а в нем создается еще один блок, но уже со свойством display: table-cell и эта конструкция ведет себя как обычная таблица – высота вложенного блока занимает все пространство, то есть в данном случае становится равной высоте родительского блока. При этом содержимое блока выравнивается по вертикали по центру, если нет указания на иное, в том числе и блоки.

Выравнивание блока по вертикали, код HTML:

<div class="main_block">
    <div>
        <div class="block">Выравнивание - блок по вертикали</div>
    </div>
</div>

Для наглядности окрасим родительский блок в красный, а дочерний в серый.

Выравнивание блока по вертикали, код CSS:

.main_block {
    display: table;
    width: 100%;
    height: 200px;
    background: #f00;
}
.main_block > div {
    display: table-cell;
    vertical-align: middle;
    background: #eee;
    height: 30px;
}
.block {
    background: #ccc;
}

Мы увидим, что красного цвета не видно, это означает что дочерний блок имеет те же размеры, что и родительский и полностью его закрывает.

Результат: блок по вертикали:

Разумеется, помимо этих основных моментов выровнять блок по вертикали потребуется еще указать высоту главного блока, если это будет необходимо. При данном варианте решения задачи выравнивания не придется “бороться” с Internet Explorer, как было бы, если бы использовалось свойство display:inline-block.

Данный метод является самым простым и компактным из всех существующих и работает везде.

Рубрики
FrontEnd

Параметры свойств в CSS

Как известно, основной “строительный” материал HTML-страниц – это блоки. Любой элемент по сути является блоком, неким прямоугольником с четырьмя сторонами и четырьмя вершинами. Для изменения внешнего вида элементов мы используем свойства CSS, далее рассматриваются параметры свойств и их значения, и указывается то, на что эти параметры влияют.

Для наглядности возьмем блок для которого нарисуем рамки:

.block {
border: 1px solid #ccc;
}

 

В данном случае каждая сторона блока будет иметь рамку серого цвета, толщиной 1px, но что делать, если рамки должны иметь отличную друг от друга ширину?

Перепишем пример сперва так, что бы визуально ничего не изменилось:

.block {
border-style: solid;
border-color: #ccc;
border-width: 1px;
}

 

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

Будем изменять значения свойства border-width.

В следующем примере мы указываем два параметра:

border-width: 1px 2px;

 

В этом случае первый параметр отвечает за верх и низ, второй за право и лево. Таким образом получается, что рамка сверху и снизу будут шириной 1px, а справа и слева по 2px.

Указываем три параметра:

border-width: 1px 2px 3px;

 

Получается, что верхняя рамка имеет толщину 1px, правая 2px, нижняя 3px, а левая имеет ту же толщину, что и правая, то есть 2px.

И наконец, если мы используем все четыре параметра, то каждый отвечает за свою сторону:

border-width: 1px 2px 3px 4px;

 

Из этого примера видно, что рамка изменилась и теперь верхняя рамка имеет толщину 1px, правая 2px, нижняя 3px, левая 4px. Получается, что перечисление параметров, при указании четырех значений, начинается сверху и идет по часовой стрелке.

Эта схема так же работает со свойствами padding, margin и с любыми свойствами, где участвуют стороны или углы блока.

Скругление углов при указании четырех параметров:

.block {
border-radius: 5px 10px 20px 40px;
-webkit-border-radius: 5px 10px 20px 40px;
-moz-border-radius: 5px 10px 20px 40px;
}

 

*для того, что бы скругления работали во всех современных браузерах мы используем соответствующие префиксы
Первый параметр отвечает за левый верхний угол и далее по часовой стрелке.

Рубрики
FrontEnd

Выравнивание – div блок по центру

Есть несколько правильных способов расположить div блок по центру. В данной статье будет описано три, наиболее распространенных.

Первыми двумя пользуются те, кто хочет добиться правильного отображения в старых браузерах, третьим способом пользуются те, кто хочет просто выровнять div блок по центру.

Способ выравнивания №1 – не универсальный:

.var_1 {
    position: relative;
    height: 30px;
    background: #eee;
}
.var_1 > div {
    left: 50%;
    width: 500px;
    margin-left: -250px;
    position: absolute;
    background: #e99;
}

Минусы:

  • используется абсолютное позиционирование, что влияет на общую картину и потребуется использовать дополнительный внешний блок;
  • надо считать чему равна половина блока.

Способ выравнивания №2 – старинный:

.var_2 {
    position: relative;
    float: right;
    right: 50%;
    background: #e4e4e4;
}
.var_2 > div {
    position: relative;
    float: left;
    left: 50%;
    width: 500px;
    background: #ee9;
}

Минусы:

  • Необходимо использовать дополнительный внешний блок;
  • Необходимо использовать внешний вспомогательный блок, нейтрализующий влияние свойства float;
  • Дополнительный блок может испортить внешний вид.

Способ выравнивания №3 – лучший:

.var_3 {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    background: #9e9;
}

В данном примере минусов нет. Все аккуратно и быстро. Может возникнуть резонный вопрос –  что делать, если не известна ширина блока но надо расположить div блок по центру?

Все просто – нужно добавить свойство display: table; и проблема будет решена. Этот способ подходит, чтобы расположить любой div блок по центру, будь то меню, блок с контентом, изображение в виде блока и т.п.

Пример: выравнивание – div блок по центру с использованием всех способов:

Рубрики
FrontEnd

Безопасные цвета HTML и CSS

Для того, чтобы применяемые на сайте цвета выглядели одинаково на всех устройствах, применяют, так называемые, безопасные цвета. Данные цвета будут одинаково смотреться в 256-цветном режиме(на старых мониторах) и в режиме True Color (32 бита).