|
|
|
|
|
|
|
|
|
|
Основы html для начинающих на понятном языке. Написание сайта для чайниковСоздание сайта с нуля Php и MySQLПриветствую вас на моем блоге start-luck.ru. Сегодня поговорим про создание сайта с нуля php. Перед началом разработки интернет-проекта вебмастера задают себе такой вопрос: на каком языке программирования создавать блог? Знающие разработчики говорят, что лучше использовать php. Рассмотрим, почему нужно изучать именно этот язык, и как это сделать на практике. Что это за язык программированияPhp переводится как гипертекстовый препроцессор. Он выполняет команды на уровне сервера, которые встраивается html-код. Почему стоит начать изучение именно с этого языка программирования? Одна из причин заключается в популярности Вордпресс. Сегодня большая часть интернет-проектов создается именно на нем, а он разрабатывался на php. Хотелось бы немного отойти от темы и рассмотреть вопрос. Где разместить созданный сайт? Это важный момент, так как от него напрямую зависит работоспособность созданного интернет-проекта. Предлагаю вам пять хостингов, которые подойдут для создания блога любой сложности.
Следующая не менее важная причина успеха в том, что php позволяет создавать динамические интернет-проекты. Этого не получится сделать на чистом html потому–что он статичен. Что нужно для работыВы не сможете программировать, если на вашем ПК не будет установлен специальный софт. Рассмотрим, что для этого понадобится:
Хотелось бы отметить, что устанавливать отдельно локальный сервер, php и базу данных сложно. Нужно разбираться в тонкостях серверного программирования. Поэтому используйте Денвер. Эту программу бесплатно скачайте и установите на ваш ПК. Если вы незнакомы с ним, посмотрите статью «Как установить Денвер». В ней подробно, описано процесс загрузки и установки локального сервера. Все что необходимо для работы находится в одном дистрибутиве и вам останется только установить его на свой ПК.
Но только одного софта для программирования будет недостаточно. Вы должны иметь хотя бы первоначальные навыки по html и css. В этом вам поможет моя статья «Лучшие способы создания сайта». Перед изучением вы должны уметь разрабатывать простые статические интернет-страницы. Как это сделать посмотрите я уже рассматривал в моей статье «С чего начать изучение HTML». Почему стоит изучатьИнтернет-проект созданный на php отличается от html более удобными настройками. А именно, возможностью автоматизировать процесс создание страницы. Например, достаточно в шапке блога изменить одно слово и все страницы поменяют свой фон. Попробуйте сделать это на html? Нужно будет открыть исходный код каждой страницы и отредактировать его. Это долго и неудобно. Если же вы создали шапку как подключаемый компонент на php, то вам достаточно произвести изменения только в одном файле. Если вы читаете эту статью, значит решили серьезно заняться веб-программированием. В таком случае без хорошего учебника не обойтись. Рекомендую обратить внимание на руководство, написанное Дмитрием Котеровым «PHP7». Используйте его как настольную книгу. Она поможет вам в изучении.
Структура сайта на phpРассмотрим небольшой пример. У нас имеется интернет-проект с шапкой, подвалом, двумя сайтбарами и блоком для основного контента.
Все страницы создаются с расширением php. Вот так будет выглядеть его код. Index.php
<html> <head> <title>Здесь нужно написать, как называется ваша страница</title> <?php require_once $_SERVER['DOCUMENT_ROOT'].'/head.php'; ?> </head> <body> <div> <?php require_once $_SERVER['DOCUMENT_ROOT'].'/top.php'; ?> </div> <div> <div> <?php require_once $_SERVER['DOCUMENT_ROOT'].'/sidebar1.php'; ?> </div> <div> Основная часть </div> <div> <?php require_once $_SERVER['DOCUMENT_ROOT'].'/sidebar2.php'; ?> </div> <div> <?php require_once $_SERVER['DOCUMENT_ROOT'].'/footer.php'; ?> </div> </div> </body> </html> Важно! Как видно из исходного кода подключаются эти файлы при помощи команды: require_once <здесь прописываем полный путь/имя>. Рассмотрим каждый из подключаемых файлов в отдельности. Каждый из них отвечает за отдельную часть интернет-проекта. Их может быть любое количество. Все зависит от задач, которые интернет-проект будет выполнять. Рассмотрим эти файлы подробнее. HeadВнимательный читатель заметил, что этого файла нет в схеме шаблона интернет-проекта. Давайте рассмотрим почему. В него прописываются мета-теги, подключаемые стили, фавикон и скрипты которые планируется использовать. Эта информация повторяется на каждой странице блога, поэтому логично вынести ее в отдельный файл. Он может выглядеть так:
<link rel="stylesheet" type="text/css" href="/style.css"/> <link rel="shortcut icon" href="/images/favicon.ico" /> <script type='text/javascript' src='/javafile.js'></script> TopРассмотрим, из чего состоит шапка созданного интернет-проекта. Обычно сюда добавляют логотип, способы связи, рекламу и прочее. Он может выглядеть так:
<div> Название </div> <div> Контактные данные </div> <div> Реклама </div> Левая колонкаВ файле sidebar1.php, расположенном слева, поместите меню блога, ссылки на полезные для читателя материалы и рекламу. Он может иметь такой вид:
<div> Меню </div> <div> Ссылки на интересный контент </div> <div> Реклама </div> В файле сайтбара размещается информация которая отображается справа нашего макета. В нем тоже может располагаться меню, ссылки и популярные записи пользователей. Он выглядит так:
<div> Метки </div> <div> Ссылки на популярные материалы </div> Подвал сайтаСамая нижняя часть на странице называется footer.php. Она, так же, как и шапка, повторяется на всех страницах интернет-проекта. В нем разместите контактную информацию, копирайт, счетчик посещений, иконки соцсетей, ссылки на разделы интернет-проекта. Код может выглядеть так:
<div> Ссылки на категории </div> <div> Коды счетчиков </div> <div> Ваши контакты </div> Вот так может выглядеть блог, написанный на php. Это простой вариант, потому что не предусматривает работу c БД, и называется модифицированной версией html-сайта. Начинающий вебмастер подумает, а что еще посмотреть по этой теме? Рекомендую вам ознакомиться с интересными курсами Русакова, изучив которые вы сможете самостоятельно создавать движки для интернет-проектов и онлайн магазины.
Остались еще вопросы. Посмотрите эти видеоуроки. ВыводИспользуйте рекомендации, описанные выше, и вы сможете создать самостоятельно профессиональный интернет-проект. Рекомендую вам посетить портал программистов GeekBrains.ru где тоже есть много полезной информации.
Сегодня мы поговорили про создание блога на php с нуля. Многим может показаться что процесс создания динамического сайта очень сложен, но это не совсем так. Главное — желание и целеустремленность. Подписывайтесь на мою группу ВКонтакте, в ней тоже есть что посмотреть. start-luck.ru Основы html для начинающих на понятном языкеОсновы html для начинающих, что сейчас должен знать каждый начинающий вебмастер или блогер. Если вы хотите научиться создавать элементарные сайты, понимать сам код, знать, что за чем стоит и должно идти, без знаний основ языка хтмл этого сделать просто невозможно. На своем блоге у меня будет целая цепочка статей, которые я посвящу этой теме от А до Я, опишу каждый тег, который присутствует в документе, что он обозначает и как его правильно использовать. к оглавлению ↑ Основы хтмлЕсли не знать самого элементарного, дальше вам путь закрыт. Я считаю, что каждый человек, который решил заниматься разработкой и созданием сайтов, должен знать и понимать основы, из чего состоит сам сайт, как он работает и что происходит в самом коде. Языков программирования конечно не мало, все они по-своему сложные, но есть такие, которые нужно знать обязательно. Если вы хотите красиво оформить письмо для отправки по почте, у вас имеется своя группа Вконтакте, группа в других социальных сетях, тот же канал youtube, вам необходимо ковыряться в коде на любом из движков сайта, базовые понятия вы просто должны знать. Навел только несколько примеров, на самом деле сейчас эти знания все чаще и чаще применяются в интернете. Я больше практик чем теоретик, поэтому в моих статьях в данной рубрике я буду показывать вам свои примеры, как и что я делал, step by step. Буду выкладывать как примеры страниц, так и целые сайты. Html документ это самый простой текстовый документ, язык тегов, с которым вы сталкиваетесь каждый день на просторах интернета. Теги описывают структуру документа. Оформляются теги угловыми < >скобками, внутри которых пишется название тега. Браузер просматривает структуру документа, выстраивает ее и отображает уже по своим инструкциям на вашем мониторе, если вы конечно все сделали правильно. Весь этот процесс начинается перед тем, как вы уже видите готовую картинку. Браузеры обрабатывают документ последовательно, от самого начала и до конца. Включая в себя полностью все, что должно быть на странице. Таблицы, картинки, скрипты и так далее, кроме это включая в себя стили CSS. к оглавлению ↑ Основы для начинающихЧто такое html — если посмотреть, что пишет Википедия - (HyperText Markup Language) язык гипертекстовой разметки документов. Большинство страниц в интернете содержат разметку страницы на этом языке. Данный язык интерпретируется браузерами, полученный в результате форматированный текст отображается на вашем мониторе компьютера или мобильного устройства. Данный язык по своей сути очень легкий и доступный в обучении. Выучить и понять его основы может каждый желающий человек. Для использования такого языка нужно знать и применять дескрипторы, которые еще называются тегами. Именно с помощью тегов и создается документ. Из чего должна состоять структура документа, какие теги должны присутствовать. Давайте разберем все на одном маленьком примере. Я написал некоторый текст в MS Office и показал его вот на этом скриншоте.
Чтобы отобразить данный текст в браузере так же само, как он был написан в документе, для этого нужно к нему добавить разметку страницу, которая включает в себя некоторые теги. Для начала посмотрите на них, дальше я опишу каждый, кто за что отвечает. <html> <body> <h3>Блог Евгения Несмелова ! Nesmelov.ru Основы html и css для начинающих</h3> <p>Добро пожаловать на мой блог, сейчас вы проходите урок по Основам HTML. Если вам понравилась данная статья, можете подписаться на данный блог, чтоб получать новые статьи на свой электронный ящик.</p> <h3>Блог Евгения Несмелова ! Nesmelov.ru Основы html и css для начинающих</h3> <p>Из каких тегов состоит любой html документ, что в него входит и где все это нужно прописать.</p> </body> </html>
Любой код состоит из символов, которые помещаются в угловые скобки. Все это называется элементами. Все элементы, как правило состоят из двух тегов, открывающего и закрывающего. Советую вам изначально внимательно смотреть за тегами, если вы пропустите один из них и не закроете его, вам нужно будет пересматривать большие части кода, чтоб найти ошибку. Были случаи, когда на это уходил не один день, человек обращается и просит ему помочь, он не может найти у себя ошибку на сайте, поэтому всегда смотрите очень внимательно, что и где вы пишите. Давайте теперь на данном примере посмотрим на каждый элемент из кода, что в нем написано, что это означает и что получается в итоге. Большинство тегов парные, которые включают в себя открывающийся тег и закрывающийся. Кроме таких тегов, существуют еще и одиночные теги. Теги могут идти вместе с другими, таким образом вкладываются друг в друга. Например отобразить текст сразу жирным и курсивом. <strong><i>Текст</strong></i>
к оглавлению ↑ Структура html документаНапомню еще раз раз, нужно следовать правилам, которые присутствуют в документе. Именно так браузер понимает что находится на странице, ее последовательность, содержание и так далее. Тег — это компонент, который говорит веб браузеру выполнить ту или иную задачу. Например присутствие абзаца, таблицы, формы или изображения. Атрибут — изменяет тег. Например можно абзац выровнять по центру или по правому краю, задать так же расположение изображения на странице и так далее. ВСЕГДА закрывайте теги, если вы его отрыли, обязательно нужно его закрыть. В противном случае будет ошибка и ваш документ будет некорректно отображаться на странице. Так же существуют исключения, про них не следует забывать. Четко нужно понимать, что существует заголовок документа и его тело. Заголовок это все, что состоит в теге <head>. Тело документа (<body>), в теле документа состоит все содержимое страницы. Если возникает необходимость оставить участок кода для себя, тем самым заключить данные теги в комментарии, для этого используется тег <!>. Все, что находится внутри такого тега, служит в роли комментария и не воспринимается браузерами. к оглавлению ↑ <html>Начнем с самого первого. В начале документа я открыл тег <html> и в конце я его закрыл </html>. Данный код присутствует абсолютно в каждом документе, он говорит браузеру, что все, помещенное между этими тегами, является HTML кодом. Является корнем самого документа, все, что в дальнейшем присутствует за этим тегом, уже не включается в документ и не воспринимается браузерами. В самом начале документа тег открывается и в самом конце он обязательно должен быть закрытым. к оглавлению ↑ <head>Весь раздел этого тега содержит в себе всю техническую информацию документа. Как и предыдущий тег, head так же должен быть открыт и в конце закрыт. В такую информацию относится заголовок страницы, ее описание, ключевые слова для поисковых систем и кодировку. Про кодировку немного ниже. <head> Содержание </head>
к оглавлению ↑ <Title>Данный тег включается в head, он должен быть написан внутри тега head. Данный тег title является обязательным и должен присутствовать в каждом html документе. В добавок к этому он отображается как заголовок окна браузера. Длинна такого заголовка не должна превышать 60 символов. В тексте такого заголовка должна содержаться максимально полная информация, которая характеризует содержание страницы. Если вы написали в заголовке "Привет Мир", именно эта информация должна отображаться на странице и никакой другой. Не стоит обманывать людей и поисковые машины, они этого не любят, тем самым вы делаете хуже себе. Информация, которая содержится в этом теге, должна соответствовать содержанию вашей страницы. к оглавлению ↑ <meta>После обязательного тега title, идет необязательный, но так же не мало важный тег meta. Данный тег является одинарным. С помощью данного тега задается описание для страницы (description) и ее ключевые слова (keywords). <meta name="keywords" content="Ключевые слова задаются через запятую"> <meta name="description" content="Описание страницы не больше двух предложений">
Кроме этого, в теге meta могут содержаться данные про автора страницы и другие свойства метаданных. Можно запретить индексацию страницы в целом для поисковых машин. Поставить автоматическое обновление страницы через 20 секунд или через 5 секунд с последующим переходом на другую страницу. <meta name="robots" content="index, follow"> <meta http-equiv="refresh" content="20"> <meta http-equiv="refresh" content="5; url=http://nesmelov.ru/">
Таких элементов meta может быть несколько, так как они могут нести абсолютно разную информацию. Остальные пользователи, когда открывают страницу в браузере, не видят все ваши описания, все это остается скрытым от глаз. к оглавлению ↑ <style>Тег style так же можно использовать для задания стилей на странице. Если вы используете много разных стилей css, в таком случае желательно задавать их в отдельном файле. Если нужно указать несколько из них, все это можно задать прямо в html документе. <style type="text/css"> .base { width: 100px; background-color: #000; height: 150px; color: #fff; }
Или добавить стили конкретно к одному тегу, для этого внутри самого тега нужно добавить элемент style. Данный тег нужно использовать внутри контейнера <head>, который задает стили для страницы. Можно использовать несколько таких тегов, ошибкой это не будет. <h4>
к оглавлению ↑ <link>Немного похожий с предыдущим тегом, с помощью тега link можно задать стили для документа, которые находятся в другом файле. Другими словами, можно подключить к существующему документу полную таблицу стилей css, которая состоит из множества свойств. Тем самым вы уменьшаете размер документа, который в итоге будет быстрее грузиться и открываться на компьютере или мобильном устройстве при слабой скорости интернета. Подключать можно больше одного файла, тут ограничений нет. Закрывать такой тег не нужно. Если все сделать правильно, к вашему документу будут подгружаться конкретные стили из отдельного файла. Данный тег можно добавить в основы html и не забывать про его существование. В итоге получается такая картинка: <link href="css/style-lg.css" rel="stylesheet"> <link href="css/style-md.css" rel="stylesheet"> <link href="css/style-sm.css" rel="stylesheet">
к оглавлению ↑ <script>С помощью тега script к документу можно подключить разные сценарии (скрипты). Присутствие закрывающего тега обязательно. Сам скрипт может располагаться в начале документа, внутри и в конце. <script type="text/javascript" href="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
к оглавлению ↑ <body>Говорит браузеру, что все помещенное между этими тегами, должно отобразиться в окне вашего браузера. Вот основные теги, которые могут присутствовать абсолютно в каждом документе. Тег body служит в качестве основного тела страницы, который включает в себя все ее содержимое. Данный тег желательно открывать и в конце документа не забыть закрывать. к оглавлению ↑ Заголовки страницы h2 h3 h4Поехали дальше, мы видим тег <h2>, который так же открывается и закрывается. Данный тег обозначает основной заголовок текста, в большинстве случаев под заголовком h2 идет название страницы. На самом деле данных заголовком всего шесть. <h2> <h3> <h4> <h5> <h5> <h6>. Их так же используют в SEO, но это уже немного другая тема. Я обязательно выделю для этого одну статью и дам подробное описание для них, подписывайтесь на обновления блога, чтоб ничего не пропустить. Наличие таких заголовком в статье сыграет важную роль при продвижении страницы. Кроме этого, ихнее использование дает вам четкую структуру страницы, ее заголовок, подзаголовки, выделения, подпункты и так далее. Всегда пользуйтесь ними и применяйте на практике. На многих CMS, например таких как WordPress, при написании текста, можно заметить «заголовок 1», "заголовок 2", "заголовок 3" и так далее. Именно они и отвечают за h2, h3 и h4. к оглавлению ↑ <p>Если вы пишите основной текст с нового абзаца, вы пишите тег <p> в начале и закрываете его в конце </p>. Обозначение абзаца в html равносильно создание нового абзаца в документе MS Word. Больше ничего нового в документ я не добавлял. Но, это еще далеко не все, что должно присутствовать в html документе. Посмотрим на еще один пример, описание будет немного позже. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML документ</title> </head> <body> <p> <b> Этот текст будет полужирным, <i>а этот - ещё и курсивным</i> </b> </p> </body> </html>
к оглавлению ↑ Основные элементы Head и Title
В каждом документе присутствует элемент head и Title. Первый из них <head>, который идет сразу после первого тега <html>. В данном теге идет вся информация о странице, в нем так же заключается элемент <title>. Title –информация о заголовке странице, другими словами название страницы, ее имя. Именно в тайтл вы указываете правильное название страницы, по которому пользователь будет искать вас через поисковую систему, очень важный момент. Оба элемента должны быть открыты и так же закрыты. Закрывается каждый элемент знаком «/». В итоге получается вот такая картинка. <html> <head> <title>Заголовок&</title> </head> <body>\Содержание страницы</body> </head> </html>
Как видите, ничего сложного нет. Перед вами самые основные теги, которые должны присутствовать в каждом html документа. Не забывайте закрывать каждый из них, иначе браузер не сможет воспринять полноценную картину кода. Это нужно знать и помнить всегда. Дальше вы уже начинаете вставлять текст, картинки, видео и так далее. Но это уже будет в других статьях. к оглавлению ↑ Редактор Notepad++
Для работы с кодом используйте программку Notepad++. Она бесплатная, найти ее в интернете не составит труда. Очень удобная для восприятия любого кода, так же удобно показывается открывающийся тег и закрывающийся. Поддерживаем синтаксис более 40 языков программирования. Как раз то, что нужно для изучения основ html. Notepad превышает во всех смыслах обычный блокнот. Для максимального удобства, простоты и учебы данный редактор изначально необходимо установить на компьютер. Самое основное преимущество и удобство, редактор Notepad++ показывает подсказки при написании кода, что делает вашу работу быстрее и качественней в разы. к оглавлению ↑ Элемент DOCTYPEВ каждом документе так же должен быть указан вот такой элемента doctype. Для чего он нужен и что в нем должно быть. Обычно народ сильно не увлекается этими строчками, копируют себе в документы и работают спокойно. Данные элементы говорят браузеру, какая версия html используется в документе, какое описание страницы, какая используется кодировка, какие ключевые слова включены, кто автор и как называется страница. Ставятся они обычно в самом начале. Существует несколько вариантов и все они отличаются друг от друга, я напишу один пример, который используется чаще всего. Данную заготовку можно использовать как готовый шаблон. Далее будет понятное описание каждой строчки, проблем с этим быть не должно. <!DOCTYPE html "-//w3c//dtd XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=windows-1251" /> <meta name="Nesmelov.ru" content="Nesmelov Evgeniy" /> <meta name="description" content="полное описание данной страницы, о чем идет речь. 1-2 предложения" /> <meta name="keywords" content="джинсы, купить джинсы, зауженные джинсы, крутые джинсы, мужские крутые джинсы" /> <title>Заголовок данной страницы</title> </head> <body> </body> </html>
к оглавлению ↑ Информация для чайниковКоротко на понятном языке про основы html: Данная строчка говорит браузеру о том, что данный документ является XHTML версия 1.0, используется английский язык и вся эта каша расположена по данному адресу. Далее в теге meta указываем кодировку, которая используется. Чаще всего используется виндовс 1251. Далее часто различные конторы по созданию шаблонов, скриптов и так далее...указывают свое название организации или просто имя фамилию и отчество. Не обязательный meta тег, но встретить его можно часто. Description — затрагивается тема по SEO, один из трех главных тегов, который должен присутствовать абсолютно в каждом документе, данный тег указывает описание страницы. Что написано на этой странице, короткое описание, не больше двух предложений. Тег keywords, так же затрагивается тема по SEO, данный тег является обязательным. В нем пишутся ключевые слова, по которым пользователи интернета будут находить вас через поисковые системы. В теге title идет название самого документа, его заголовок, который мы видим в браузере. Наверное самый важный тег во всем документе, который больше всего влияет на продвижение страницы. В статье по добавлению и оформлению текста html идет описание данного тега более детально. Что необходимо запомнить с данного урока про основы html:
Все главные страницы всегда должны называться словом index. Так принято и так все привыкли, без разницы какое будет расширение у файла, это может быть и html и php. Называется он всегда только так. Посмотрите видео про основы html от компании Webformyself. Язык гипертекстовой разметки, базовые элементы и структура. Все это и многое другое я постараюсь описать на своем блоге. В первую очередь для новичков будет написана полезная информация, предоставлен пример кода и возможность скачать сам пример вместе с готовой страницей. Евгений Несмелов nesmelov.ru
serblog.ru Создание html страницы в блокноте: разъяснения для чайниковПриветствую вас на страницах блога Start-Luck. Сегодня мне бы хотелось показать вам, как использовать код. Писать сайты – интересное занятие, которое многим может казаться невыполнимо сложным. На самом деле простенькую страничку можно создать всего за 5 минут.
В этой статье я расскажу про создание html страницы. Выполним мы эту задачу менее, чем за 10 минут, а потом более подробно разберемся с основными тегами. Было бы неправильно называть подобную публикацию уроком. Это скорее затравка, которая призвана показать вам простоту работы и родить в вас желание двигаться дальше, изучить больше, делать лучше. Как создать страничкуПервую страницу я предлагаю вам сделать в блокноте. Самом простом, который находится в меню «Пуск», папка «Стандартные». Пока не нужно ничего скачивать. Попробуйте воспользоваться тем, что имеете.
Откройте документ.
Вставьте в него вот этот код.
<html> <head> <title>Моя первая страница</title> </head> <body> <center><h2>Создать страницу проще, чем вы думаете</h2></center> Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате. <br/><br/> <center><img alt="Компьютер" src="https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg"></center> <br/><br/> <font>Простой код позволяет сделать текст красным</font> <br/><br/> <b>Написать жирным не намного сложнее</b> <br/><br/> Мы дошли до самого низа <br/><br/> Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино. <br/><br/> <hr> К примеру, вот ссылка на мой блог - <a href="http://start-luck.ru/">Start-Luck</a> - рассказывает просто о "сложном". <br/><br/> Ну вот и все. Ваша первая страница готова <br/><br/> </body> </html> Теперь нажмите «Сохранить как…». Это очень важный момент.
Файл нужно назвать index.html. Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.
Я сохранял документ на рабочий стол. Теперь нужно найти его, нажать правую кнопку мыши и открыть с помощью любого браузера. Я выберу Google Chrome.
Вот так выглядит только что созданная мной страничка. Ваша ничем не будет отличаться. Все точно также: с картинками и цветным шрифтом.
Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center» и вставим строчку, в которой содержится слово «Color». Кстати, как менять цвет html я уже писал. Это очень просто, рекомендую к прочтению. Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5 Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: </font>.
Видите, заголовок стал красным. Точно также вы можете придать нужный оттенок любой части текста. Ну вот и все, пример готов, и вы должны гордиться собой. Конечно, она еще не находится онлайн, для этого веб-страницу надо выложить на сервер, который предоставляется хостингом. Нужно также подключить свой домен, чтобы и другие люди могли увидеть ваше творение. Пока страничку видите только вы. Но согласитесь, таким сайтом можно удивить только человека из железного века. Но это первый опыт, давайте сделаем его еще более успешным, разобравшись с тегами, которые мы использовали. Это поможет вам научиться создавать свои проекты, без чьей либо помощи. ТегиС вашего позволения я перейду в программу NotePad++. Она обладает целым рядом преимуществ в сравнении с обычным блокнотом. Сейчас мне очень пригодится подсветка тегов, чтобы показывать вам те элементы, о которых я буду рассказывать. Вообще, если вы собираетесь, изучать html, то я очень рекомендую установить эту бесплатную программу. Она не единственная и я могу предложить вам еще несколько в своем обзоре, если кого-то заинтересуют альтернативы. Мы же перейдем к теоретической части. ОсновныеНачинается и заканчивается страница с тегов <html></html>. Они показывают браузеру, что это веб-документ, созданный при помощи html.
Далее идет <head></head> или заголовок. В ней располагается самая важная информация о странице, в нашем случае – Title. Если вы еще не нашли фразу «Моя первая страница», которая присутствует в коде, обратите внимание на саму вкладку, над поисковой строчкой.
Именно теги <title></title> отвечают за начало и конец основной информации о страничке.
Далее идет основная контентная часть. Теги <body></body>. Все видимое на странице: заголовки, текст, картинки и так далее.
Тег <h2> указывает на то, что фраза является заголовком. По умолчанию, она чуть больше основного текста и выделяется жирным. Если бы мы с вами сейчас писали не только на html, но и создавали CSS-файл, с которым перекликался наш файл, то могли бы управлять размерами, шрифтом и даже цветом всех заголовков на странице, не прописывая font style, как мы это делали в примере. Хотя об этом тоже рановато.
Кстати, Title и h2 имеют свое влияние во время присваивания вашему сайту места в поисковой выдаче. Относиться к ним нужно с большим вниманием и не писать внутри лишь бы что. Они имеют отношение к сео-оптимизации. Помимо h2, существуют еще и h3, h4,h5. В этой же строчке есть открывающийся и закрывающийся <center>. Благодаря этому элементу можно выравнивать текст по середине. Если этот тег удалить, то текст встанет по правому краю.
<br/> — один из немногих единичных тегов. То есть он работает сам по себе. Благодаря этому элементы вы перепрыгиваете с одной строки, на другую. Проще говоря, делаете отступ. Написали его один раз, значит один раз переместились вниз, два, как у меня, и отступ получился чуть больше.
КартинкаДалее идет тег img, то есть image, картинка. Квадратная скобка открывается, в нее вписывается вся основная информация о изображении, только после этого она закрывается. Надо отметить, что img – это тег, а все остальные элементы кода, которые вписываются внутрь, это его атрибуты. Первым делом идет alt, то есть описание. Это также необходимо для оптимизации. Иногда добавляется еще и title. При наведении на изображение мышью рядом с курсором появляется подсказка, когда страница уже открыта в браузере.
Можно было загрузить рисунок в папку сайта и прописать к ней путь, но я пошел простым путем. Среди бесплатных фотографий на Pixabay я нашел картинку, открыл ее в новом окне и вставил ссылку. В теге src прописывается путь к картинке. Именно он указывает браузеру, что дальше нужно двигаться, чтобы найти нужное изображение, а в каком направлении искать – пишете вы сами.
Форматирование текста<font></font> отвечает за придание части текста какого-то особого стиля, к примеру, как в нашем случае другого цвета. style=»color:red» показывает, что цвет будет красным. Если хотите желтый, напишите yellow, зеленый – green. Можно пользоваться кодами цветов из фотошопа.
<b></b> помогает выделить текст жирным.
<hr/> рисует горизонтальную линию. Он одиночный и используется только в закрытом виде. Если вы напишете <hr/> несколько раз, то получите ровно столько же горизонтальных полос при открытии страницы в браузере. Ссылки<a> указывает браузеру, что дальше будет ссылка. Вы хотите перенаправить читателя на другой адрес. Этот тег идет с обязательным атрибутом href=”адрес”. В кавычки вставляется путь, куда браузер должен перенести посетителя страницы. После того, как этот тег прописан, вставляется описание, слово или несколько, при нажатии на которое читателя будет переносить дальше. После того как эти условия выполнены, можно вставлять второй, закрывающийся тег </а>.
После того как основная часть страницы написана, вы закрываете тег body, так как тело закончено. И указываете на то, что прекращаете на сегодня использовать html. Если вы хотите больше узнать о тегах html и научиться вставлять не только картинки, но и видео, создавать кнопки, различные формы, списки, параграфы, то я могу предложить вам бесплатный курс Евгения Попова «Основы html». Всего 33 урока помогут вам выйти на новый уровень.
Ещё хочу порекомендовать вам Видеокурс, который рассказывает, как верстаются сайты. Весь процесс показан на реальных примерах, что особенно хорошо. Курс предназначен как для новичков, которые ещё даже HTML не знают, так и для тех, кто уже хорошо знает и HTML, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup
Помимо этого заберите Бесплатную книгу по созданию сайтов! Эта книга рассчитана на начинающих, и вот там создаётся сайт ОТ и ДО. То есть готовится дизайн, затем верстаются страницы, пишется программная часть, а после сайт размещается в Интернете. Автор тщательно всё комментирует, а в книге очень много скриншотов и иллюстраций. Причём особенностью книги является то, что создаётся не какой-то абстрактный сайт, а вполне реальный и существующий в Интернете.
Сегодня вы сделали много, ведь первый шаг самый сложный. Подписывайтесь на рассылку и группу ВКонтакте, и узнавайте еще: как и зачем нужен движок сайта, что такое блочная верстка и модульная сетка, как правильно писать сайты и многое другое. До новых встреч и удачи! start-luck.ru Учебник HTML. Основы HTMLЭтот учебник целиком и полностью посвящён языку HTML, без знаний которого не обойтись в создании какой либо веб-страницы. HTML язык - это основа, база которую просто таки необходимо знать любому начинающему веб-мастеру! Этот язык, сам по себе (в чистом виде), достаточно простой, думаю его с легкостью может освоить любой "продвинутый" шестиклассник.. в тоже время он позволяет самостоятельно создавать полноценные страницы и сайты. Рассчитан этот HTML учебник для начинающих "с нуля" людей, которые только только решили освоить веб-ремесло, поэтому старался писать его как можно более развернуто и что называется "доходчиво", в тоже время стараясь охватить весь курс до мелочей, так что может быть и опытный веб-мастер найдет в нём для себя что-то новое или будет использовать его в качестве "шпаргалки", изложенной в прилагаемом справочнике тегов. Где нет "воды" и нудноватого для уже опытного человека "разжёвывания" материала. Ну и сразу к делу.. начнем с классики.. Откройте блокнот, да да, тот самый блокнот.. Пуск> Стандартные> Блокнот и напишите в нем следующий текст: <html><head><title>Моя первая страничка</title></head><body>Привет мир!!!<br>Меня зовут (здесь впишите Ваше имя), это моя первая страничка!</body></html> Далее, сохраните этот текст как html документ, название придумайте сами.. главное чтобы расширение было html Повторюсь, чтобы не было казусов.. в блокноте кликаем по меню "Файл", выбираем "Сохранить как.." в строке "Имя файла" пишем: index.html, просто по умолчанию блокнот предлагает сохранить файл с расширением *.txt, а нам нужно расширение *. html Далее открываем этот файл при помощи Вашего браузера.. ну к примеру того же Internet Explorerа (правой кнопкой по нашему файлу.. "Открыть с помощью.." Internet Explorer) Поздравляю, Вы написали свою первую страничку!!! Если в Вашей душе загорелась искорка, проснулась тяга к знаниям и творчеству, предлагаю планомерно ознакомится с главами этого учебника. В них на доступном языке с множеством примеров я постараюсь объяснить то, что мы только что написали, а так же как сделать этот документ более привлекательным, вставить в него графику, таблицы, прописать ссылки.. в общем, сделать его полноценным сайтом, заслуживающим места во всемирной паутине. www.webremeslo.ru Алгоритм создания сайта для чайников. 7 шагов
От автора: приветствую вас, дорогой читатель. Что такое, по вашему, алгоритм создания сайта и из чего он состоит? В этой статье я попробую ответить на этот вопрос. Хочу сразу сказать, что нет и не будет какого-то единого алгоритма в создании сайта, потому что сегодня его можно создать очень разными способами, в зависимости от ваших знаний, денежных вложений и потребностей. Например, веб-ресурс можно создать в конструкторе, можно заказать его разработку команду профессионалов, можно воспользоваться услугами площадки, где можно даже бесплатно разместить свой проект. Но давайте подробнее рассмотрим сам алгоритм, чтобы вы четко понимали, чем какие этапы при создании ресурса нужно соблюсти. ЦельПервый вопрос, на который нужно ответить: “Какова цель создания этого сайта?” Без ответа на него нет смысла двигаться дальше. Вы скажете, что это естественно, но много неплохих проектов сегодня уже заброшены просто потому, что не было четкой цели при их создании. Вы должны определиться, какой именно вам нужен ресурс и что он будет давать людям, которые будут на него заходить. Например, если фрилансер хочет увеличить количество заказов, он может создать свой личный блог, где поделиться своими статьями и портфолио. В этом случае его цель – с помощью сайта привлечь к себе больше клиентов, поднять свою репутацию и профессионализм в глазах других людей.  Современные тенденции и подходы в веб-разработке Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении Узнать подробнееОпределиться с именемДоменное имя – это то, что закрепиться за вашим проектом на долгие годы, поэтому нужно очень ответственно подойти к его выбору. Оно должно отражать основную суть, идею сайта. Иногда особо думать над названием не надо. Например, если компания называется так то, то очевидно, что ее именем нужно назвать и сайт, главное, чтобы доменное имя не было занято, но если так, то можно подобрать близкое по звучанию слово, либо сделать имя из 2-3 слов. Если вы создаете личный блог, то доменным именем может быть просто ваше имя и фамилия. В подборе имени вам могут помочь различные специальные инструменты. Определиться с дизайномКаким должен быть дизайн? Уникальным? Или подойдет шаблон? Во втором случае вы экономите массу времени и денег, но и не получаете тех преимуществ, которые могли бы получить при уникальном оформлении. Сегодня любому крупному проекту просто необходим свой собственный, уникальный дизайн, иначе он просто не будет воспринят серьезно. Также в последние года все более важным становится, чтобы дизайн был адаптивным, то есть подстраивался и изменялся под мобильные устройства, чтобы просматривать сайт было удобно. Решить, что будет наполнять сайтПо-хорошему, этот вопрос должен быть решен еще перед созданием дизайн, чтобы оформление можно было создать для разных типов страниц. Например, на блоге стандартно выделяют три разных типа страниц по структуре: главная, страница вывода постов и сам пост. Если это интернет-магазин, то тут будет все по-другому. Вместо постов будут товары и их описание. Вместо вывода постов – каталог товаров и т.д. Определить, какой функционал нужен на сайтеОдин из самых важных этапов. Вы должны постараться выписать все, что должно быть у вас на ресурсе. Например, что такого должно быть в интернет-магазине? Желательно, там должна быть возможность оставлять отзывы на товары, перетаскивать их в корзину, рассчитывать общую стоимость заказа, сохранять этот результат до тех пор, пока пользователь не нажмет на кнопку оформления заказа. Очевидно, что должна быть система приема платежей, возможность посмотреть подробные характеристики, а может быть, даже сравнить товары. В определении функционала вам может помочь просмотр других сайтов. Например, если вы хотите создать свой информационный проект, вам будет полезно глянуть, какие возможности есть у успешных проектов подобного типа, желательно с учетом вашей тематики. Реализация дизайна, верстка и установка на движокОбычно это выглядит так. Когда все продумано, остается нарисовать дизайн вашего проекта, утвердить его, сверстать с помощью html и css, после чего натянуть на движок, который вы выберете. Движок тоже нужно выбирать исходя из того, какой вам нужен функционал. Например, хорошие блоги обычно держат на WordPress, интернет-магазин быстро и легко создается на OpenCart, многофунциональный Drupal подойдет для проектов, где нужно реализовать много возможностей и т.д. Так или иначе, вам полезно будет разбираться в движках хоть немного, либо проконсультироваться по этому поводу с человеком, который разбирается. Покупка хостинга и публичная публикация в интернетеВсе предыдущие этапы нужно выполнять на локальном сервере. Там вы можете экспериментировать сколько угодно, чтобы довести проект до нужного состояния. После того, как все готово, вы можете разместить свой проект в сети. Для этого вы сами должны выбрать хостера, у которого купите место, а также сам тариф. Для более менее важных и серьезных проектов рекомендую сразу же брать виртуальный выделенный сервер. Позднее вы сможете сменить тариф на более мощный, если в этом будет необходимость. Итак, вам нужно приобрести место на удаленном сервере, скопировать туда файлы движка, установить его, поставить разработанный шаблон и настроить сайт. На этом, конечно, работа ни в коем случае не заканчиваеся, потому что теперь вам предстоит наполнять проект, но все равно можно выдохнуть – самый ответственный этап позади. Сегодня в сети много вспомогательных площадок и движков, благодаря которым алгоритм создания сайта для чайников заметно упрощается, но если вы хотите самостоятельно разобраться в этом деле и стать настоящим профессионалом в деле сайтостроения, то вам не обойтись без тщательного обучения. В этом вам может помочь наш проект. Многое из того, чтобы было написано в этой статье, вы также можете посмотреть в нашем видео об этапах создания интернет-ресурса, где все раскладывается по полочкам. Ну а на этом я буду заканчивать. Надеюсь, для себя вы узнали что-то новое. А если хотите узнавать еще больше, обязательно подписывайтесь на наш образовательный портал. Современные тенденции и подходы в веб-разработке Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении Узнать подробнее Фреймворк YII2: теория и первая практикаОвладейте азами фреймворка Yii2 за 5 дней! Получитьwebformyself.com Как писать сайты. Пишем сайт с нуля.
Добрый день, друзья. Ну вот мы и освоили начальный курс сайтостроения. Теперь у нас есть собственный сайт на основе стандартной темы WordPress. Мы вполне можем писать статьи, наполнять свой ресурс, развивать и продвигать его. Но все ли вас устраивает в собственном сайте на основе стандартной темы? Сначала я тоже создал сайт на основе бесплатной темы. Привел его в приличный вид, написал несколько статей и решил немного поменять дизайн. Тогда я уже освоил самые азы HTML и CSS и решил, что все будет довольно просто. Но тут я уперся в главную проблему. Многие стандартные темы изначально были написаны на языке РНР. Функции и команды языка РНР позже генерируют код HTML, и я не мог совсем разобраться, что, где и как. В наборе файлов-шаблонов своей темы я видел непонятные кракозябры и команды на языке РНР, а когда просматривал код страницы через свой браузер, то видел совсем иной код. Я элементарно не мог поправить некоторые элементы дизайна, порой даже поменять цвет шрифта для меня было большой проблемой. Потом я подумал, что даже если я сумею развить свой сайт и начну с него зарабатывать, я элементарно не смогу вставить на него рекламу, потому что не знаю, как устроен сам сайт. Это меня так сильно озадачило, что я было решил и вовсе забросить собственный ресурс и никогда к нему не возвращаться.
Мне повезло. Я узнал, что мой знакомый тоже увлекается сайтостроением, и он создавал свои сайты с нуля, также в самом начале намучившись со стандартными темами. Он посоветовал мне попробовать изучить языки и написать свою тему самому. Сначала я воспринял его предложение, как шутку. Как я смогу написать тему с нуля, когда я полный профан в сайтостроении. Но меня заверили, что языки HTML и CSS не такие сложные и страшные, какими они кажутся в начале. И я решил попробовать. И я начал углубленно изучать языки программирования — HTML и CSS. Сначала было сложно, но когда я стал практиковаться и писать тему с нуля – тег за тегом, буковка за буковкой, это занятие меня реально затянуло. Было сложно, но я видел, как постепенно выстраивается дизайн моего будущего сайта – именно такой, который я хотел. Теперь, когда я начал разбираться в языках программирования, я мог сделать именно такое оформление, которое представлял себе я.
Да, было сложно. Да, было много препон и проблем еще на этапе создания каркаса дизайна на HTML и РНР. Я взял за основу сайт моего знакомого, разбирал каждую строчку, а когда реально не мог преодолеть какое-то сложное место – просил совета и более опытного товарища. Но старался всегда понять суть проблемы – мне было интересно понять, как все это устроено и работает. Даже когда я создал и запустил свой сайт, я мало знал о сайтостроении. Ведь я создал простой блог со стандартным функционалом, а видов сайтов – великое множество. Но самое главное – я понял принцип работы и построения сайта и разобрался в основах сайтостроения. Сейчас мне хочется передать свои знания вам, читатели этого блога. Скажу сразу – я не профессиональный программист или сайтостроитель. Многие вещи я понимаю поверхностно, многое не знаю. Но создание блога от «А» до «Я» я познал на своем опыте методом проб и ошибок. И я буду рассказывать все своими словами – не научными терминами, а простым и доступным языком. И надеюсь, что начинающим сайтостроителям так будет понятнее. Конечно, можно выбрать понравившуюся тему и чуточку настроить под себя. Многие так и делают. Но если хотите понять и узнать, как все это работает – тогда вам сюда. Многие стандартные темы WordPress изначально пишутся на РНР многие элементы дизайна сделаны уже на нем. В итоге в шаблонах темы мы видим одно (неясные команды на РНР), а в коде странице — совсем другое (сгенерированный код HTML). Тут и с поллитрой не разобраться. Мы же с вами изначально напишем сайт с нуля на HTML и CSS (разбирая каждую букву и тег, каждую строчку и блок), и потом лишь внедрим основные команды на РНР. Тогда вы сами поймете, как же работает этот сложный (или простой?) механизм под названием сайт.
Для начала я вкратце расскажу про основы HTML, CSS и РНР. Я не буду кидаться заумными терминами, а объясню все просто, своими словами. После нескольких вводных занятий мы уже начнем создавать собственную тему. Рекомендую найти в интернете и прочесть простые самоучители по HTML и CSS и разобраться с основными тегами и атрибутами HTМL и свойствами CSS. Я обучался по таким самоучителям (HTML и CSS) и пользуюсь вот этими сайтами (см. список ниже), как справочниками. Первое время вы постоянно будете заглядывать в самоучитель и справочник, и это нормально.
Мы по отдельности создадим каждую страничку шаблона сайта: главную страницу, страницу записи, страницу ошибки 404, страницу поиска и т.п. в HTML, оформим дизайн на языке CSS, и только потом внедрим РНР. Уже в следующих статьях мы узнаем, что такое шаблоны страницы и как устроен сайт, чтобы у вас было понимание, узнаем основы HTML и CSS и сразу же начнем создавать собственный сайт. Все будет последовательно, без скачков и забеганий вперед. В конце нашего курса мы будем иметь собственно написанный сайт. Ну вот и все, друзья. Теперь бросаем скорее свою стандартную тему и пишем сайт с нуля. Это сложно, но очень интересно. А я буду вам помогать и подсказывать. Скоро я расскажу, как устроен сайт, и что такое шаблоны страниц. Оставайтесь с нами. Будет интересно! saitopis.ru
|
