Сайт начинающего верстальщика

Как создать первую веб-страницу

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

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

В качестве текстового редактора можно использовать как обычный Блокнот, так и более продвинутые программы. Рассмотрим некоторые из них:

Текстовые редакторы

Блокнот – это стандартная программа ОС Windows. Чтобы создать документ в этом редакторе – кликните по рабочему столу правой кнопкой мыши, выберите «создать» «текстовый документ».

Notepad++ представляет собой по сути более продвинутый блокнот, но в нем есть подсветка HTML-синтаксиса, что делает чтение кода более удобным. Рекомендую использовать этот редактор в процессе обучения.
Чтобы скачать Notepad++ идем на их сайт и жмем «download». После завершения загрузки устанавливаем его на свой компьютер. Программа абсолютно бесплатна.

Также в него можно установить плагины, которые позволят избежать кучи ручной работы, но для начала нам нужно набить руку и написать сотни метров кода именно вручную, чтобы все лучше усвоилось. Поэтому о плагинах пока не думаем.
Помните, как в 1-м классе мы писали одну и ту же букву по несколько строк в специальных тетрадках в косую линию? 🙂 Считайте, что сейчас я прошу вас писать эти буковки, т.к. это улучшит ваше понимание и запоминание кода.

Sublime Text очень удобен тем, что подсказывает теги (автодополнение), сам делает отступы, закрывает теги и много чего другого. Словом, он очень упрощает работу над HTML-документом, но рекомендую использовать его позже, когда уже выучите хотя бы основные теги и поймете главные правила синтаксиса. Правда, если у вас не Windows, а другая операционка – ставьте сразу Sublime.

Здесь выбирайте подходящую вам систему и качайте. Программой можно пользоваться бесплатно, но, если вам захочется убрать надпись “unregistered” – придётся заплатить $70.

Браузер

Используйте любой на ваш вкус. Но большинство разработчиков для веб разработки используют именно Chrome, который имеет ряд инструментов, которые облегчают жизнь разработчика. Имейте в виду, что некоторые браузеры могут по-разному отображать один и тот же код, поэтому, когда дело дойдет до создания серьезного сайта – его нужно будет проверить во всех популярных браузерах.

Итак, с рабочим инвентарём мы определились.

Теперь создайте папку с любым названием, например, “HTML_Start” и в ней сохраните свой первый HTML-документ:

1. Открываем Notepad++
2. В левом верхнем углу жмём «Файл» — «сохранить как», выбираем нашу папку
3. Называем файл «index.html», либо просто «index» и в строке «тип файла» выбираем Hyper Text Markup Language file.
4. Жмём «сохранить».

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

Почему именно index.html ?

Обычно мы заходим на сайт с главной страницы. Когда у сайта множество страниц, мы подсказываем веб-серверу, которую из них нужно загружать автоматически. В большинстве случаев, адрес сайта указывается кратко, без лишних файлов на конце. Сравните, vertex-academy.com и vertex-academy.com/index.html – это одна и та же страница, но мы конечно же напишем, как в первом варианте. Вот тогда браузер заходит в папку сайта и определяет файл, который нужно показать. Если index.html в этой папке отсутствует, тогда браузер покажет список всех файлов, которые лежат в этой папке.
Теперь мы наконец готовы создать свою первую веб-страницу.

Но прежде буквально пару слов о тегах

HTML-код всегда помещен между угловых скобок.
Например,

Источник

Как редактировать HTML файлы.

Как открыть HTML-файл для редактирования? Очень просто.

1)Открываем нашу папку, и наводим мышь на наш файл «index.html» далее кликаем правой кнопкой мыши.
2)Наводим мышкой на пункт «Открыть с помощью» и у нас появляется выпадающее окно с программами.
3)В окне с программами кликаем «Блокнот» и у нас запускается «блокнот» с нужным хтмл-файлом.
Если в окне с программами нет «блокнота», тогда немного ниже нажимаем «Выбрать программу. »

И уже в этом окне двойным щелчком кликаем по «Блокнот» или 1 раз кликаем по блокнот и нажимаем «ОК» Все, наш файл открыт для дальнейшего редактирования.

Далее, если вы что-то отредактировали, вам уже не нужно для сохранения нажимать «файл⇒сохранить как», а более проще:«файл⇒сохранить», т.к. файл у нас уже существует.

И последнее, я не настаиваю что-бы вы использовали в качестве текстового редактора «Блокнот», он немного неудобен, еще из стандартных у вам может быть «WorldPad», но лично я использую «HAPedit-3.1», разработчики французы, и потому интерфейс программы русский язык не поддерживает, но есть английский и немецкий. Но за то в нем полно преимуществ, подсветка синтаксиса, дописывает теги и атрибуты для html, так-же работает с CSS, PHP и многими другими языками, кроме XML.

В следующей главе мы поговорим о том как изменить цвет текста и фона страницы.

Смотрите также:

Информатика в параллельном мире

Много пишешь о себе помогаешь ФСБ

Сходи прогуглись

Брачная ночь

Почему он так напоминает демотиватор

Новый уровень

Охренели совсем

А сегодня он целый день признавался в любви принтеру

Так и работаем

Сохраните своему ребенку девственность

Вот как все начинается

Найдется всё

Комп обычной китайской семьи

Ну да, канечно

20 минут без интернета

Подразделы

• Атрибуты тега TABLE, бордюры, размеры и другие. Самоучитель HTML
• Атрибуты тегов TR, TD, TH. Вложеные таблицы. Самоучитель HTML
• Текстовые блоки DIV и P, а так же их выравнивание Самоучитель HTML
• Как сделать текст жирным, курсивом, подчеркнутым и так далее. Самоучитель HTML
• Как вставить флеш-объект в html-файл. Самоучитель HTML
• Как задать картинку фоном страницы. Самоучитель HTML
• Как задать шрифт, изменить размер или цвет текста отдельного участка. Самоучитель HTML
• Как сделать форму для отправки данных. Самоучитель HTML
• Введение в HTML-фреймы. Самоучитель HTML
• Атрибуты тега FRAME. Самоучитель HTML
• История развития HTML. Самоучитель HTML
• Введение в HTML Самоучитель HTML
• Полный список HTML тегов. Самоучитель HTML
• Как вставить картинку в HTML-файл. Самоучитель HTML
• Инлайн фреймы — IFrame в HTML. Самоучитель HTML
• Поля для ввода текста в формы. Самоучитель HTML
• Как изменить цвет текста и фона на странице. Самоучитель HTML
• Как вставить Java-аплет в HTML. Самоучитель HTML
• Клиентские карты изображений. Самоучитель HTML
• Клиентские карты изображений, продолжение. Самоучитель HTML
• Ссылки в HTML фреймах. Самоучитель HTML
• Как сделать ссылку внутри страницы? Самоучитель HTML
• Как сделать ссылку в HTML? Самоучитель HTML
• Список МЕТА-тегов в HTML. Самоучитель HTML
• Вспомогатльные теги в HTML Самоучитель HTML
• Объекты в HTML-документах. Самоучитель HTML
• Механизмы отправки HTML-формы. Самоучитель HTML
• Выключатели и переключатели в HTML-формах. Самоучитель HTML
• Аудио, видео плеер для сайта. Самоучитель HTML
• Форматированный и бегущий текст. Самоучитель HTML
• Пути в HTML. Абсолютные и относительные ссылки в html-ссылках. Самоучитель HTML
• Растягивание ячейки. Самоучитель HTML
• Как редактировать HTML файлы. Самоучитель HTML
• Серверные карты изображений. Самоучитель HTML
• Специальные символы. Самоучитель HTML
• Выпадающие списки в HTML-формах. Самоучитель HTML
• HTML-списки: неупорядоченные, упорядоченные и определения Самоучитель HTML
• Введение в html-таблицы . Самоучитель HTML
• Текст возле картинки. Самоучитель HTML
• Как сохранить текстовый файл с расширением HTML Самоучитель HTML
• Перенос строк в HTML Самоучитель HTML
• Заглавия в ХТМЛ документах. Самоучитель HTML

Источник

Как написать и запустить HTML на компьютере

Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

Зайдите на сайт и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если OS X или Linux — нажмите Other platforms.

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.

Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

1. Add workspace folder — открывает меню выбора папки.
2. Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
3. Нажмём Add.

После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down, чтобы увидеть результат.

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

     
  
 
 
День первый. Как я забыл покормить кота Кто бы мог подумать, что семантика это так важно, мне срочно нужно было об этом поговорить. Взгляд упал на кота. Кот издал настойчивое «Мяу». И я понял — пришло время для первой записи в блог. И покормить кота.
  
    

Скопируем код со стилями из файла — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.

Шаг 6. Запускаем код и смотрим на результат

Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

После установки расширения Windows может попросить разрешение на доступ к сети. Это нужно, чтобы запускать локальный сервер, Разрешайте, это безопасно.

Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.

Что мы сделали

1. Установили и настроили редактор кода.
2. Создали рабочую папку и добавили туда файлы нашего проекта.
3. Научились редактировать и сохранять файлы с кодом.
4. Установили расширение, чтобы сразу видеть результат вёрстки.

В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее.

Внеклассное чтение

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник