Как сделать сайт в блокноте html с картинками и гиперссылками?

18 ответов на вопрос “Как сделать сайт в блокноте html с картинками и гиперссылками?”

  1. Компас земной Ответить

    Создание сайтов в интернете на бесплатном хостинге

    Шаг 3. HTML гиперссылки
    Рассмотрим переход от одного документа к другому посредством гиперссылки.
    Чтобы осуществить ссылку с одного документа на другой, нам нужны два файла: index.html, а другой давайте назовем file_2.html.
    Переход в данном случае будет осуществляться от
    главной страницы к второстепенной и обратно.
    Итак, создадим файл index.html:
    Главная страница
    Предисловие
    Наш мир стоит на пороге больших перемен. Изменения начались еще во второй половине XX века, когда в развитых капиталистических странах все больше людей стали привлекаться к офисной работе как продавцы, менеджеры, администраторы и так далее. Все идет к тому, что со временем производство переместится в страны с дешевой рабочей силой, а класс «белых воротничков» станет преобладающим в структуре государств с высоким экономическим показателем.
    С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку…
    Продолжение на другой странице.

  2. SnexFO Ответить

    1. — эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.
    Любая html страница имеет следующую структуру:


    …
    Заголовочные теги
    …


    …
    Тело страницы
    …


    2. — между этими тегами заключается весь видимый контент страницы.
    3. — внутри этих тегов должны располагаться все заголовочные теги. Этот раздел можно опустить, но я не советую это делать, поскольку это важная часть документа, особенно для поисковых систем. Более подробно про читайте в описание заголовочных тегов
    4. — между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег часто сокращенно называют “тайтлом”. Советую ознакомиться со статьей: как составить тег
    Теперь перейдем к тегам, которые находятся в теле html страницы (внутри и ).
    5. — эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет – центр экрана. В будущем рекомендуется отказаться от использования этих тегов.
    6. — это один из класса тегов заголовочных тегов .., обычно в него заключают название страницы. Например, у этой странице заголовочный тег “Пример создания html страницы”.
    Примечание
    эти теги имеют большой вес в ранжировании сайта, поэтому ими необходимо пользоваться аккуратно и с умом.
    При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег , а дальше могут идти уже

    ,

    и т.д. Главное, чтобы не было сначала

    , потом , потом

    и т.п. Должна быть строгая иерархия. Заголовков

    ,

    и т.п. может быть много.
    Более подробно про эти теги читайте в уроке 14 HTML теги – – заголовочные теги внутри страницы
    7.
    — это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.
    8. — это одиночный тег, который выводит изображение.
    src — обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
    Примечание:
    Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL;
    Не забудьте указать расширение изображения. Например, .jpg, .gif, .jpeg.
    alt или title — в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта, особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.
    Более подробно про читайте в специальном уроке: html тег

  3. Sabersinger Ответить

    Урок №2
    Создание своей первой веб-страницы
    Сайты в интернете, состоят из HTML-страниц, точно также как обычная книга состоит из бумажных страниц, только в отличии от страниц книги, HTML-страницы соединены между собой не переплётом, а ссылками. Давайте создадим свою первую HTML-страницу.
    Для того чтобы сделать сайт, нужно сначала создать HTML-страницу. Сделав несколько HTML-страниц и соединив их с помощью ссылок, мы получим сайт.
    HTML-страницы создаются с помощью языка HTML, а код этого языка записывается в текстовых редакторах, например в обычном Блокноте от Windows. Открыв Блокнот и введя туда код написанный на языке HTML, а затем сохранив получившийся документ в файл с расширением .html мы получим HTML-файл, который можно просмотреть с помощью браузера.
    Открыть Блокнот в Windows можно следующим образом:
    Пуск — Все программы

    Стандартные — Блокнот

    В Блокноте наберите следующий код:
    Название страницы
    Заголовок статьи
    Абзац статьи.
    Или просто скопируйте его и вставьте в Блокнот:

    Затем сохраните получившийся документ на Рабочий стол, в виде файла с названием index и расширением .html
    Для этого нажмите на кнопки:
    Файл — Сохранить как…

    В появившемся окне выберите Рабочий стол, имя файла напишите index.html и нажмите кнопку:
    Сохранить

    Теперь файл index.html, который вы сохранили на Рабочий стол, можно открыть в браузере и посмотреть на получившуюся HTML-страницу. Для этого, нужно нажать правой кнопкой мыши по файлу index.html и выбрать из имеющихся у вас браузеров, я обычно использую браузер FireFox:
    Открыть с помощью — FireFox

    Если у вас на компьютере не установлен браузер FireFox, то можете открыть файл index.html любым другим браузером, например: Opera, Google Chrome, Internet Explorer или Safari.
    Файл index.html, открытый в браузере FireFox:

    На этом, первый урок учебника по HTML, окончен. В следующем уроке мы подробно разберём HTML-код и узнаем из каких частей он состоит.
    Читать далее: Разбираем HTML-код
    Category:
    HTML
    Tag:
    html, создание страницы, учебник html

  4. Thordirne Ответить

    Здравствуйте, уважаемые читатели моего блога. Очень радует, что остались еще люди, которые из двух путей выбирают тот, что ведет к успеху. Думаю, что вы прекрасно понимаете, что эта дорога сложна, на ней встретятся кучи пустой литературы, разногласий, выводящих из себя, обвинений монитора в том, что все не так, как должно быть. Зато результат… это большие деньги.
    Сегодня мы поговорим как создать сайт в блокноте. Не всем нужно читать эту статью. Для начала еще раз спросите у себя: «Быть может, мне важен лишь результат? Один-единственный сайт. Свой. И все». Существуют более простые пути решения проблемы, не обязательно изучать html.

    Вам не нужно читать эту статью

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

    Многие обучающие книги по CSS и html начинаются именно с этой темы. У меня есть подходящая статья для вас, но я не считаю этот вариант обучения лучшим. Да, у него есть свои преимущества. Создав страничку с гиперссылками, разноцветным текстом и так далее, вы получите опыт работы. Но так ли полезен он будет? Где вы впоследствии его сможете использовать?
    Думаете, что это знакомство даст вам какие-то преимущества? Сомневаюсь. И тем не менее не могу отказать вам в этой небольшой услуге, отправив читать другую публикацию.
    Что касается обучения через книги, о котором я упомянул ранее – тоже не вижу особой пользы от этого метода. Конечно, я, как и многие люди, в большей мере склонен верить тому, что написано в книгах. Ими занимаются издательства, уж наверняка в них не будет глупых ошибок.
    Знаете наверное, в интернете можно найти статьи, в которых рассказывают как сильные мира сего, при создании сайта сами допускают уйму неточностей, авторы находят неправильный код даже в страницах, написанных лучшими web-студиями мира.

  5. Hugigda Ответить


    Рис. 2. Это уже, по сути, веб-страничка, хоть и самая примитивная.
    Сохраняйте и опять открывайте страницу в браузере. Если вы видите фразу на фоне красного цвета – все работает. Можно начинать работу над созданием своего сайта. В css мы указали команду сделать красный цвет фоном всей нашей страницы. Теперь понимаете для чего он нужен, этот css?
    Вот так вот мы и будем создавать сайт: формировать элементы в html, потом оформлять их через css и в конце концов получим что-то, похожее на сайт.

    Структура сайта

    Пока я предлагаю вам отвлечься от кода и немного подумать. Наверняка в сети вы бывали на сотнях сайтов. Хотя внешний вид у всех их разный, общая структура часто очень похожа. Есть так называемая шапка сайта, где размещается логотип, контактная информация и т.д.
    Есть горизонтальное или вертикальное меню, в котором вынесены ссылки на самые главные страницы и разделы сайта. Также есть основная часть, где располагается контент и, возможно, еще одна боковая колонка. Обязательно присутствует низ страницы, где тоже что-то размещают.
    Нам остается только разобраться, как с помощью html можно эти элементы явно задать, а потом прописать им какой-то внешний вид. Об этой, более подробной и практической части создания поговорим в следующей статье, потому что тема слишком велика, чтобы описать ее на одной странице.
    Ну а вообще, разработке сайта в блокноте – не самый удобный способ, как я уже и говорил. В дальнейшем, если вы захотите серьезно заниматься сайтостроением, то вам в любом случае понадобится более серьезная программа вместе с уроками, которые позволят изучить нужные технологии. А в следующей статье мы продолжим создание сайта с помощью html в блокноте и сделаем нашу страничку более похожей на настоящий сайт.

Добавить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *