Создание простого сайта — 1

Создание простого сайта часть 1

Здравствуйте уважаемые читатели. В этой статье я покажу что нужно знать для начинающего сайтостроителя.

Начнем со структуры (каркаса) простого сайта.

В любом коде любого сайта присуствуют теги. Тег-это элемент языка гипертекстовой разметки.

Код описанный выше показывает основные теги которые будут вам необходимы.

Есть открывающий тег<..> и закрывающий.

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

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

Открываем наш блокнот и пишем:

Это моя первая страница

Hello, world!!!

Нажмите сохранить как, можете называть ее как угодно но желательно конечно со смыслом и на английском языке. И так назовем наш файл hello world.html, запомните самое главное поставить расширение не .txt а .html, это важно потому что если вы сохраните ваш файл в формате txt то он в итоге откроется как обычный текстовый файл.

И так мы сохранили файл с расширением .html, теперь откроем его в обычном браузере щелкнув по вашему файлу 2 раза.

И вуаля:

Мы видим надпись здравствуй мир.

На этом мы сегодня закончим.

И вот вам несколько основных тегов которые вам нужно будет знать начало и конец файла

Имя документа, должно быть в заголовке описание документа содержимое страницы

Заглавие, в нем 6 уровней от одного до шести

Секция

Цитата

Форматированый

Верхний индекс

Нижний индекс

Сайта-строение часть 2

И так вы уже узнали самое основное что надо для начинающего сайтостроителя. Сейчас вы должны сделать для вашего сайта отдельное место на своем компьютере. Для этого создайте новую папку с названием вашего будущего сайта , в этой папке можете создать еще одну например для картинок с названием images. И мено в папку сайта мы будем сохранять ваши будущие страницы картинки и прочее.

И так приступим.

Для начала сделайте картинку рекламируемого вами продукта и загрузите ее в папку images. Далее напишите статью к вашему продукту.

<html>

<head>

<title>

Инфопродукт

</title>

</head>

<body>

<table align=»center»>

<tr>

<td>

<h1><center>Что такое инфопродукт</center></h1>

</td>

</tr>

<tr>

<td>

<center><img src=»C:\Users\zigzag\Desktop\тестовый сайт\images\загруженное.jpg»></center>

</td>

</tr>

<tr>

<td>

<pre>

<center>

Слышали когда-нибудь об инфопродуках? А вы знаете, какую прибыль они способны приносить? Тогда давайте разбираться. Что же такое инфопродукт и какие перспективы личного создания инфопродукта?

Всё очень просто. Вы наверняка встречали какой-нибудь обучающий курс на диске. Например.. видео курс «как создать свой сайт с нуля» или «учимся работать с фотошопом». Это и есть инфопродукт. То есть какой-то курс, по окончании которого вы будете что-то знать и уметь. Кстати, это может быть и книга, не обязательно какой-то диск или цикл видеоуроков.

В чем преимущества? Согласитесь, гораздо удобнее повышать свои умения в то время, когда хочется это делать. Не надо ехать ни на какие курсы, в какое-то определённо время ещё и платить за это. А результат по сути один и тот же. К примеру, аудиолекции можно слушать за рулём, пока едешь на встречу или в метро – экономия времени и повышенная эффективность! Всем удобно. То есть в удобное время и в удобном месте – вы сами решаете когда и где вам учиться.

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

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

</center>

</pre>

</td>

</tr>

</table>

</body>

</html>

И так вот что у нас получилось:

Правда неплохо для начала)

После того как написали код сохраните его с названием index.html.

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

Как вы видите наш код стал немного длинее благодаря нескольким новым тегом.

Это теги:

<table>

<tr>

<td>…</td>

</tr>

</html>

<img src=»…»> и <h1>…</h1>

И так давайте разберем по порядку что же мы сделали. Сначала мы сказали браузеру что это html документ при помощи тега <html>…</html>, далее в атрибуте <title>…</title> тега <head>…</head> так называемой головы html документа мы указали заголовок сайта, далее в тег <body>…</body> записываем все что должно отображаться на самой странице и здесь начинается самое интересное. В даном примере я использовал таблицы для размещение информации в нужном мне виде. И так для начала мы открываем тег <table> тем самым говоря браузеру что мы используем таблицу. Затем в том же теге <table> мы включили атрибут align со значением center благодаря которому наша таблица разместилась по центру. Далее мы прописываем тег <tr> что означает контейнер в который мы записываем еще один тег <td> что означает ячейка в которую мы будем записывать все что необходимо отоброзить на экране монитора, сейчас мы вставили в эту ячейку картинку которую вы должны были сохранить в папке вашего сайта. Мы добавили картинку при помощи тега img и атрибута src, атрибут src необходим для того чтобы задавать адрес картинки которую надо загрузить. Для того что бы задать путь вам необходимо зайти в свойство картинки и скопирова расположение и не забудте поставить расширение картинки как здесь: <img src=»C:\Users\zigzag\Desktop\тестовый сайт\images\загруженное.jpg»>.

На самом деле это не единственный способ загрузки картинок можно еще указать полный путь. Это будет выглядеть примерно так: <img src=»data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2w…»>, на самом деле адрес там намного больше поэтому я поставил трое точие. Для того что бы задать полный путь нажмите на нужную вам картинку правой кнопкой мыши и нажмите открыть картинку в новой вкладке, и воля копируем адрес в адресной строке и вставляем его в атрибут src тега img. Ах да еще мы раположили нашу картинку между тегами <center>…</center> это сделано для того что бы наша картинка распологалась по центру ячейки. Ну далее мы собственно закрывам наши теги ячейки и контейнера. Далее мы делаем такуюже процедуру только теперь мы вставляем не картинку а собственно текст(описание предлогаемого продукта), мы делаем это при помощи тегов <p>…</p> что означает абзац и тега <center>…</center> со свойствами которого мы разобрались чуть раньше. если вам нужно что бы текст высвечивался на странице так как вы написали в коде то можно использовать тег <pre>…</pre> все что вы напишите между этими тегами выведится на экран так же как вы написали в исходнике. Далее мы собственно закрываем все теги по порядку в том числе и тег <table>. Ах да я вам еще не сказал для чего нужна вот эта строка:

<h1><center>Что такое инфопродукт</center></h1>

При помощи тега <h1>…</h1> мы задали заголовок нашей статьи, ну а про тег <center> уже и говорить не стоит.

Ну вот собственно и все на сегодня.

comments powered by HyperComments

Оставьте мне собщение