Перейти к содержимому

сайт в блокноте

foto Хочешь сайт? Напиши его сам  и размести на хостинге REG.RU. Изучай HTML 5 самостоятельно

Графический редактор ( файл установки) Notepad++ скачать можно здесь…..Notepad++




Здравствуйте посетители этой страницы, если вы посетили ее,  значит вы хотите познакомиться с кодами HTML. В наше время, где интернет имеет место, хочется иметь свой сайт. Как видите,  он у  меня есть. Я его создал на хостинге Рег.ру ( платный хостинг ), где при заказе хостинга, домен предоставляется бесплатно-доменное имя на ваш выбор. Я использую бесплатный движок wordpress и там же бесплатный конструктор сайтов с  готовыми шаблонами и  темами для создания сайтов. Вы можете создать сайт у себя на компьютере, в любом графическом редакторе, для тренировки, сайт можно создать даже в блокноте. Я не программист, но при редактировании, той или иной страницы своего сайта приходится сталкиваться с кодами HTML. И вот сейчас вкратце немного опишу некоторые коды. И так что же такое HTML (Hyper Text Markup  Language)-язык гипертекстовой разметки. Из  чего состоит практически любая ( так же сайт) html страница, скелет Html страницы-это теги заключенные в  <..> скобки. Тег  <html> где расположены теги <head> и <body> и закрываются эти теги  / вот такой косой палочкой-слэш.  Cоздаём  обыкновенную папку под любым названием и пишем в блокноте и не забывайте сохранять ваш документ с расширением index.html.  Будет это выглядеть вот так:
<html>
<head>
</head>
<body>
</body>
</html>
Тег <html> - Это папка или контейнер, где содержится вся полезная информация и закрывает эту информацию тег </html>. Это парный тег, где есть начало и конец содержимого.
      В верхней части страницы содержится  парный тег <head> </head> где содержатся служебные теги и мета теги предназначенные для работы с браузерами и поисковыми системами и его содержимое не видно обычному пользователю –это голова сайта, где указывается его название. Пользователю видно, что находится  между тегами <body> -полезная информация-</body> - это основное тело страницы, которое содержит рабочие элементы и выглядит это так: Что такое 
<!doctupe html>??? смотри здесь...
  1. <!doctupe html>
  2. <html>
  3. <head>
4.<meta charset=”UTF-8”>
5.<title>название страницы</title>
  1. </head>
  2. <body>
    1. <H1>название заголовка</H1>
    2. <p>текст абзаца или какой-то текст</p>
    3. </body>
    11.</html>
    И так здесь добавлены элементы которые непонятны могут быть, под первым номером расположен доктайп-раньше после символов html печаталась версия доктайпа или( версия html), сейчас в последней версии  H5, доктайп для всех версий html одинаковый ( стандарт), как написано под номером  1.  Под 4м номером расположен мета тег  ,, чарсет,, , он указывает браузеру, в какой кодировке расположены символы на странице, формат UTF-8. До этого использовался другой формат windows . Под 5м номером расположено название вашей страницы или документа (название вкладки). Под номером 8  указаны теги размера  шрифта H1-это самый большой размер, самый маленький шрифт обозначается H6.   Под номером   9.   расположен не мало важный тег-тег абзаца. Тег под номером 3.-это голова сайта ,тег под номером 7.-это тело сайта.  Выше  расположен  скелет сайта, сейчас  будем снабжать его информацией. Тегов для сайта много и они распределены по типам - это теги верхнего уровня, теги заголовка, блочные элементы, теги строчных элементов, универсальных элементов, теги списков, таблицы, фреймы и сематическая разметка.  Конечно  я их все описывать не буду, опишу некоторые, с которыми получится сайт. Теги верхнего уровня уже знакомы – это  <html>, <head> и <body>. Теги заголовка документа  <title></title> - это заголовок сайта , <meta></meta> - это тег, который вмещает в себя информацию необходимую для работы браузера и поисковых систем. Блочные элементы служат для указания размещения элементов страницы и выглядят примерно так:

foto

       Тег  <H1> это тег размещения заголовка текста, тег < div> представляет собой универсальный блочный элемент, где включены теги <p>,  <hr>, <pre>. Тег  <P> как уже известно это тег абзаца, тег <HR> проводит горизонтальную черту на странице, тег  <PRE> это тег предварительного форматирования. Что это значит, если вы запишите текст вот так:  ДЕД МОРОЗ КРАСНЫЙ НОС, ТАБУРЕТОЧКУ ПРИНЕС  , без тегов то в браузере это будет выглядеть в одну строчку, как здесь, если вы заключите это в теги <pre>ДЕД МОРОЗ КРАСНЫЙ НОС,ТАБУРЕТОЧКУ ПРИНЁС</pre> , то картина изменится и будет вот так:
ДЕД МОРОЗ КРАСНЫЙ НОС,
ТАБУРЕТОЧКУ ПРИНЁС, т.е. стишок записывается в столбик.  Если  данные слова  заключить  в  тег <p>ДЕД МОРОЗ КРАСНЫЙ НОС</p><p>ТАБУРЕТОЧКУ ПРИНЁС</p> , то каждые слова заключённые в теги будут выглядеть в браузере абзацем, т.е. с новой строки:
ДЕД МОРОЗ КРАСНЫЙ НОС,
ТАБУРЕТОЧКУ ПРИНЁС  и  между словами изменился интервал по вертикали. Теперь разберемся со строчными элементами и  служат они для изменения  свойств текста  и внешнего вида,  и если мы объединим уже известные слова в один абзац <p>ДЕД МОРОЗ КРАСНЫЙ НОС, ТАБУРЕТОЧКУ ПРИНЁС</p> , то в браузере будет снова видна одна строка и что надо сделать, чтобы снова были строчки в столбик?  Используем тег <br>  , он переносит слова на новую строку  и не делает отступа, т.е. слова будут записываться в столбик ,запись будет выглядеть так: <p>ДЕД МОРОЗ КРАСНЫЙ НОС,<br>ТАБУРЕТОЧКУ ПРИНЁС</br> </p> , и выглядеть в браузере будет так:
ДЕД МОРОЗ КРАСНЫЙ НОС
ТАБУРЕТОЧКУ ПРИНЁС , и чтобы к примеру какой-то из текстов  сделать жирным, то используется тег <b> и записываем это так:<p><b>ДЕД МОРОЗ КРАСНЫЙ НОС</b></p> и в браузере это будет выглядеть так:  ДЕД МОРОЗ КРАСНЫЙ НОС.  Тег <em> </em> это курсив и если сделать к примеру так: <p><b>ДЕД<em> МОРОЗ</em>  КРАСНЫЙ НОС</b></p> , то выглядеть это будет так  ДЕД МОРОЗ КРАСНЫЙ НОС , слово ,,МОРОЗ,, стало жирным и наклонным. Теперь можно сделать например, одну строчку большой, а другую маленькой и записываем <p><big><b>ДЕД МОРОЗ КРАСНЫЙ НОС</b></big><br><small>ТАБУРЕТОЧКУ ПРИНЁС</small><br></p> и в браузере это будет выглядеть :
ДЕД МОРОЗ КРАСНЫЙ НОС
ТАБУРЕТОЧКУ ПРИНЁС ,  т.е. сейчас мы видим, что тег  <big>  увеличивает текст, а тег   <small> уменьшает. Блочные элементы занимают всю доступную ширину, в строчных элементах, ширина зависит от содержимого + поля и отступы.
          Высота строчного и блочного элементов в целом зависит от содержимого , у блочных элементов, каждый элемент занимает новую строку, строчные элементы могут занимать одну строку, если позволяет ширина отведённого им места. Блочные элементы могут встраиваться в другие блочные элементы, строчные элементы могут встраиваться как в другие блочные , так и в строчные элементы, но блочные элементы в строчные вкладываться не могут – в этом различие между блочными и строчными элементами.
Описание некоторых тегов применяемых в построение сайта:
<b></b>              жирный                                                           <i></i>                курсив
<tt></tt>  моноширинный текст   это шрифт с одинаковой фиксированной шириной - шрифт пишущей машинки. К одному фрагменту текста сразу может применяться несколько тегов 

<tt><b><i>текст</i></b></tt>

В тексте, атрибутом  <face>  можно задавать тип шрифта <font face=”arial”> пишется текст(шрифт Ариал)</font>. В данном атрибуте можно записывать несколько видов шрифта и если вдруг на компьютере не окажется какого-то вида шрифта, то будет отображаться другой вид шрифта, пример:   <font face=”arial, verdana, courier”>текст</font>
<u></u>                                   подчеркнутый    
<S></S>  и  <strike></strike>        зачеркнутый
<em></em>                              акцент                                                
 <sub></sub>                     подстрочный индекс
<sup>         надстрочный индекс , например вы хотите записать  150 градусов вот  так  ( 150º C), то записывается это так 150 <sup>0</sup> C.   Для вставки фото или картинки на страницу используется тег  <img  src=””  alt=””>  ,  мы видим, что у этого тега есть еще что-то  src и alt-это атрибуты ,которые служат для изменения свойств тега, либо для добавления дополнительных свойств. В данном случае атрибут  Src  указывает браузеру  откуда взять картинку, между верхними  ковычками “ ” указывается путь , где расположена картинка. Атрибут     Alt     показывает  текст ( это может быть название картинки или какой-то заголовок статьи), в том случае, если  картинку невозможно будет отобразить.
Если картинка находится в папке с сайтом ,то записать это можно так:  <p><center> <img  src=”cat.jpg”  alt=”изображение кошки”></center></p>   картинка выровнена по центру.
                   Изменение размера данной картинки записывается так:
<img  src=”img/cat.jpg”  width=”200” height=”180”>    где  height-высота,  а width- ширина. Чтобы например записать толщину и длину горизонтальной черты  длина 100 толщина 3<hr  align=”left”  width=”100”   size=”3”  noshade>   . 
<div></div>                          раздел                                                           <span></span>                интервал
Универсальный атрибут   <style>  при помощи которого можно изменить цвет страницы и записать это так:  <body style = “background-color:  #DF8C5D”> . Где   #DF8C5D  цвет в шестнадцатиричном исчислении.
<p></p>                   абзац                                    
<pre></pre>          предварительно отформатированный
<br></br>                 разрыв                                  
 <hr>        горизонтальная  черта
<ol></ol>               упорядоченный   или  нумерованный    список
<ul></ul>             не упорядоченный  список                    
<li></li>          пункт списка
<dl><?dl>            определение списка терминов            
<dt></dt>         определение терминов
<dd></dd>         определение описания термина           
<table></table>                  таблица
<thead></thead>                    заголовок таблицы                <tbody></tbody>             тело  таблицы
                                      Выравнивание  абзаца
<p align=”left”>текст</p>          абзац выровнен по левому краю
<p align=”right”>текст</p>         абзац выровнен по правому краю
<p align=”center”>текст</p>       абзац выровнен по центру
<p align=”justify”>текст</p>         абзац выровнен по ширине
Вместо тега <p> , можно использовать тег <div></div>
<p><font size=”+1”>текст</font></p>    где цифра 1 указывает на размер шрифта от 1-го до 6-ти,
6-ой самый маленький  шрифт абзаца.    
<font size=”+1”>текст</font>    такими тегами выделяется  большой фрагмент текста. Тегами   <font></font>  выделяются заголовки.  Здесь нужно помнить, что параграф не может содержать другие параграфы, следующие конструкции будут не верны и вводить их в документ нельзя: !!!

foto

Для переходов на другие сайты, переходы  между страницами своего сайта служат как ссылки,так и атрибуты к ним:
Атрибуты       Link, alink, vlink     задают цвет шрифта гиперссылок, атрибут  link служит для выделения гиперссылок, которые не посещались,  vlink  - посещенные ссылки,    alink-выделяет активную гиперссылку.
<a href=”index.html”> главная</a>    ссылка на главную страницу сайта
<a href=” http://yandex17.net”></a>           ссылка на другой сайт, если вместо  index.html  поставить какую-то цифру из страниц вашего сайта обязательно с расширением   html ,  то ссылка приведет на данную страницу. Теперь написанное немного соберем в кучу или запишем в блокнот. Внутри папки вашего сайта  в котором находится ваш  index.html  документ создаём папку под названием  img  или images  и в нее вкладываем вами подготовленную фотографию для сайта и вставляем ее в свой сайт
<img src=”images/my.jpg”>  где images или img это папка с вашей картинкой, а my.jpg это ваша картинка, картинка может и по другому называться и иметь другой формат, Gif, PNG и тд. Это значение не имеет. Если картинка будет на другом сайте,  то путь ее будет записываться так:
<img src=”http://www.homepage.ru/my/my.jpg”>   .  Внимательно  читайте, не ошибитесь в буквах в названии папки и пути к ней, не то в браузере вместо фото будет отображаться квадратик в левом углу сайта.  Я вставил картинку в шапку сайта и записал это так :
                   <!doctupe html>
 <html>
        <head>
  <meta charset=”UTF-8”>
       <hr>
    <center><img src="images/chapka.PNG"></center>
            <title>мой сайт</title>
           </head>
Вы можете вставить картинку в тело сайта, на страницу в <body> это зависит какую картинку вы приготовили. Если вы вставили картинку    в   <body>  и картинка не так расположена, как хотелось, то следует вспомнить об атрибуте  Align, <img src=”images/my.jpg”  align=”left”>   картинка прижмется к левому краю, если записать, 
<img src=”images/my.jpg”  align=”right”>   , то картинка  прижмется к правому краю. Если вы захотите записать текст внизу картинки,то следует записать так: 
<img src=”images/my.jpg”  align=”botton”>   , если посередине, то так:         <img src=”images/my.jpg”  align=”middle”>   ,если текст расположить сверху, то записываем так:     <img src=”images/my.jpg”  align=”top”>   . Кроме атрибута   align  можно ввести еще несколько атрибутов:

foto

  1. Задаёт расстояние между текстом и рисунком по вертикали расстояние в пикселях (px)
  2. То же самое, только по горизонтали и также расстояние в пикселях
  3. Краткое описание картинки, при наведении курсора на картинку, через 2-3 сек.  появляется описание картинки.
  4. Ширина картинки в пикселях, если по умолчанию ширину не задавать, то она будет равна ширине вашей картинки
  5. Высота картинки-в пикселях, здесь также высоту картинки можно не задавать.
  6. Рамка вокруг картинки, задаётся в пикселях, можно этот пункт не задавать, по умолчанию, рамка вокруг картинки есть всегда и если её совсем убрать, то border=”0”.  Я пишу обозначения картинки разное, сверху было Cat, потом  My, а сейчас images- это не должно ввести вас в заблуждение-это название картинки. Сейчас я помещу картинку в тело сайта и запишу это так: <img src="images/lubov.PNG" align="botton"  alt=" lubov">  . Что здесь видно, картинка без всяких отступов  текст будет расположен под картинкой и вот так это выглядит на фрагменте сайта:

foto

Вы здесь наблюдаете, что разный текст,  в первой строке жирный текст и прижат влево ,вторая строка –нормальный текст, в третьей использован курсив и последняя строчка  уменьшеный текст, здесь использованы теги и атрибуты описанные выше.  Теперь время описать ссылки:, страница может состоять из нескольких документов, у нас сейчас  сайт состоит из 2х документов, основной из них   Index.html  и второй это папка с фотками images, но в папке с сайтом могут быть и другие документы например:
Index.html    -  основной документ и должен обязательно состоять в вашем сайте, остальные документы можно называть как угодно.
 Foto.html
Contact.html
Video.html        и тд. и  тп.   При помощи ссылок связываются эти документы, с главной страницы можно перейти на страницу с фотографиями , каким-то незаконченным текстом  или видео и наоборот. Ссылкой может быть фраза, текст или картинка, сейчас опишу текстовую ссылку . Создаём новый документ , foto.html  , в той же папке где находится главный документ. Я сейчас выровняю  четверостишье в столбик и сделаю ссылкой последнее слово    ,, в другой раз,,.  Документ  foto.html  равнозначен вашему документу  Index.html , за исключением некоторых деталей, которые описаны , но не применены, сейчас применим это ссылка  <a href=”index.html”> главная</a>  и атрибуты  задающих цвет. Также как и текст, цвета ссылок зaписывается  в <body>,  <body text=”#dc4b4b”  bgcolor=”#0b3bb5”  link=”#bde90c”  alink=”# 217c09”  vlink=”# ea11ce ”>, некоторые цвета могут  быть  одинаковыми, здесь все разные- это на ваше усмотрение.  Если документ с вашими фото, то сделать ссылку вот так:
<a href=”foto.html”>посмотреть фото</a> . Тег <a></a> делает ссылку на заключенную в нем картинку или фразу, с прописыванием пути  уже вроде бы как знакомы.
  1. <a href=”foto.html”> посмотреть фото</a>
  2. <a href=”images/foto.html”>посмотреть фото</a>
  3. <a href=” https://yandex17.net/foto.html”>посмотреть фото</a> .     В первом случае документ расположен как сейчас у меня в папке  foto.html  . Во втором случае документ расположен в папке    images   , ну и в третьем  случае у меня ссылка на мой сайт , где расположен документ. Первые 2 примера называются относительными путями, третий путь  называется абсолютным, включает путь полностью с именем сайта. Относительный путь используется ссылкой на документы  внутри  вашего сайта, а абсолютный путь   используется ссылкой на чужие или сторонние страницы.  Мы можем задавать различные цвета для различных блоков наших документов  при помощи тегов и атрибутов, <font color=”#........”></font> . В данном случае <font> это тег, а   color атрибут.  
    <a  href=”foto.html”><font color=”#0b3bb5”>смотреть мои фото</font></a> /   . Обратите внимание , что цвет прописывается внутри тега    <a> , если прописать по другому,то не удастся создать цвет ссылки  в отличие от других ссылок в документе. Ссылкой может быть картинка и записывается так:    
<a  href=”foto.html”><img  src=”images/foto.jpg”></a>  , это так же как и с текстом, только вместо текста  картинка.  Здесь у меня была некоторая проблема, когда слова сделал ссылкой     <a  href=”foto.html”>    на фото все нормально, браузер сработал по переходу, а когда на фото вставил ссылку, то браузер  не находил страницу, что сделал?  Записал так   <a  href=  foto.html  >    , вроде бы одинаково, ковычек сверху нет в ссылке, такая ссылка сработала. У меня три  браузера  и  все три  не находили страницу.
Вот так выглядит папка с сайтом :

foto

Теперь содержимое папки  :

foto

Содержимое  документа  Index.html
           <!doctupe html>
 <html>
        <head>
        <meta charset=”UTF-8”>
 <hr>
    <center><img src="images/chapka.PNG"></center>
<title>мой сайт</title>
    </head>
     <br>
        <br>
  <hr>
    <br>
 <body text="#10e21f" bgcolor="#f5f48e">
<center><H1>заработай со мной</H1>
 <br>
 <p><H2><font color="#f90909">делаем сайт в блокноте</font></H2></p>
  <br>
   <br>
    <font color="#3315e8">
  <div align="left">
      <br>
    <a href= foto.html ><img src="images/lubov.PNG" align="botton" ></a> 
      <br>
<ol><p><b>Про любовь</b></p></ol>        
        <pre>
Закидать цветами – не вопрос,
Ведь люблю тебя я без прикрас,
Только с миллионом алых роз
<a href="foto.html"><font color=”#0b3bb5”>Я приду, родная, в другой раз.</a>         
          </pre>
   </div>
          </font>
</body>
         </html>
Здесь вы наблюдаете, что  в слово из  четверостишья и в фото  вставлена   Ссылка и слово стало подчеркнутым и другим цветом.  Вот так выглядит часть сайта :

foto

Так выглядит запись  foto.html  документа:
                   <!doctupe html>
 <html>
        <head>
 <meta charset=”UTF-8”>
 <hr>
    <center><img src="images/chapka.PNG"></center>
 <title>мой сайт</title>
   </head>
     <br>
        <br>
  <hr>
    <br>
 <body text="#10e21f" bgcolor="#f8f3a4">
          <center><H1>заработай со мной</H1>
 <br>
 <p><H2><font color="#f90909">делаем сайт в блокноте</font></H2></p>
  <br>                          
   <br>
    <font color="#3315e8">
  <div align="left">
      <br>
<br>
   <center><img src="images/zorkiy glac.PNG" ></center>
 <br>
 </div>
</font>
        <br>
<a href="index.html"><b>на главную</b></a>
</body>
</html>
Графический редактор ( файл установки) Notepad++ скачать можно здесь…..Notepad++

 Исходный файл 1  HTML скачать здесь...sait-HTML

Исходный файл 2 HTML скачать здесь...sam sdelai sait

 Пробуйте , дерзайте и у вас получится !!!    Продолжение
следует……
видео-как вставить фото в шапку и в тело сайта смотрите здесь...