Среда, 13.11.2019, 09:12 Добавить в избранное
Регистрация Вход Главная Форум
Гость
[ Новые сообщения · Правила форума · Поиск · RSS]
Меню сайта
Мини-чат
Скорость интернета
  • Страница 1 из 1
  • 1
Форум » Обучение » HTML » Сайт за пять минут
Сайт за пять минут
Abadon Дата: Пятница, 14.03.2008, 12:47 | Сообщение # 1
Группа:






Да. Вы МОЖЕТЕ создать сайт. И свой первый сайт вы сделаете всего лишь за 5 минут !

Итак. Сначала нам нужен простейший текстовый редактор, например Блокнот.

Для того чтобы запустить Блокнот, жмем кнопку Пуск -> Все программы -> Стандартные -> Блокнот

Теперь выделите левой кнопкой мышки код, написанный ниже синим цветом и скопируйте его в буфер (через правую кнопку мышки, или нажав Ctrl и кнопку C, или через меню Блокнота : Правка -> Копировать).

Моя первая интернет страница всего лишь за 5 минут

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

Затем перейдите в Блокнот и вставьте из буфера скопированный код (через правую кнопку мышки, или нажав Ctrl и V, или выбрав в меню Блокнота пункт Правка -> Вставить).

Теперь выбираем в меню Блокнота : Файл - > Сохранить как ...

Выбираем место на диске (запомните куда вы сохраняете файл !), затем вводим имя файла, под которым мы сохраним нашу страничку. Вводим например page.html и жмем кнопку "Сохранить"

Расширение файла html - показывает, что данный файл является интернет-страницей.

Теперь найдите на вашем диске сохраненный файл page.html.
Тут такой нюанс, если блокнот сохранил ваш файл как page.html.txt - то переименуйте его в page.html

Теперь запустите файл page.html, нажав быстро мышкой по файлу 2 раза.

У вас запуститься ваш браузер, например Internet Explorer и откроется ВАША страничка.

Поздравляю ! Вы только что сделали свою первую интернет страницу !

Разве было сложно ? Думаю что нет и можно продолжить.

Как видите - создание интернет-страниц не такое уж непосильное дело. Это ДОСТУПНО КАЖДОМУ.

 
Abadon Дата: Пятница, 14.03.2008, 12:54 | Сообщение # 2
Группа:






Теперь разберем подробней что есть что и для чего нужно.

Создание страниц производиться с помощью языка гипертекстовой разметки HTML
(Hyper Text Marker Language).

Команды, которые пишутся между скобками < > называются тегами.

Теги бывают парные и не парные. Парные теги например hеad и /head
Один тег является открывающим , а другой тег является закрывающим
. Как видите закрывающий отличается от открывающего - знаком "/".
Какие теги парные, а какие нет следует запоминать.

Теперь о тегах которые мы употребили в нашей страничке.

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

....

Далее страница состоит подобно человеку. Имеет голову и тело .

( в дальнейшем я буду выделять красным цветом то,
что было добавлено или изменено в предыдущий код)

Между тегами и вставляются теги и .
! Запомните это.

Между тегами и пишется название страницы. Текст написанный между этими тегами будет отображаться в названии окна Интернет Эксплорера.

Между тегами и пишется непосредственно содержимое
интернет страницы (иначе говоря контент страницы). Все что вы напишите - будет
на вашей странице.

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

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

 
Abadon Дата: Пятница, 14.03.2008, 15:27 | Сообщение # 3
Группа:






Раскрашиваем страницу

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

Моя первая интернет страница всего лишь за 5 минут

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

Изменение цвета фона страницы

Добавьте в тег следующий параметр тега bgcolor="#00CCFF", чтобы в итоге получилось так

bgcolor="#00CCFF">

Сохраните вашу страницу (Файл->Сохранить) и откройте вашу страницу (или нажмите обновить если вы не закрывали страницу).

Для создания цветов на странице используется RGB-модель. Т.е. любой цвет "составляется" из 3 основных цветов -Red Green Blue.


запись из нашего примера #00CCFF расшифровывается так : 00 частей красного, СС частей зеленого, FF частей голубого.
каждый из знаков может быть от 0 до 9, или буквы от А до F. Таким образом вы можете синтезировать любой цвет.

Вот некоторые цвета и их код

изменение цвета текста

Для того чтобы изменить цвет текста на всей странице, или иными словами назначить
цвет текста по умолчанию, надо в тег добавить еще один параметр.
Добавьте text="#FFFF00"

итого у нас тег будет такой :

text="#FFFF00">

Сохраните файл и посмотрите что получилось. Должно получиться ТАК.



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



Добавьте на страницу следующее


я
буду богатым и свободным человеком !



Код вашей странице теперь будет такой :

Моя первая интернет страница всего лишь за 5 минут

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


color="#0000FF">я буду счастливым и свободным человеком !

тег
как я писал ранее служит для принудительного переноса
текста на следующую строку.

 
Abadon Дата: Пятница, 14.03.2008, 15:53 | Сообщение # 4
Группа:






Допустим вы решили вставить на сайт вот такую картинку :

Сначала вам нужно сохранить эту картинку у себя на компьютере. Для этого наведите курсор мышки на картинку и нажмите правую кнопку мышки. Выберите "Сохранить рисунок как..." Укажите место для сохранения картинки.
Сохраните картинку там-же, где находиться страничка, которую мы делаем - page.html
Имя файла картинки оставьте тоже самое - 05a4822605c0.jpg

Для вставки на страницу картинки - используется тег

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

В нашем случае для вставки картинки 05a4822605c0.jpg вставляем в код страницы,
в то место куда мы хотим вставить картинку, следующий код :

< img src=05a4822605c0.jpg>

или более грамотно писать вот так < img src="05a4822605c0.jpg" >, хотя код выше тоже будет работать.

через параметр src указывается имя файла-картинки.

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

Моя первая интернет страница всего лишь за 5 минут

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


я
буду счастливым и свободным человеком !



теги
вставлены чтобы расположить картинку на несколько строк ниже
текста.

Желательно в параметрах картинки указать ее размеры. Для этого используется
параметр width (ширина картинки) и height (высота картинки). Т.е.
например вот так :

width="258"
height="146"
>

размеры картинки указываются в пикселях.

Если вы хотите чтобы при наведении мышки на картинку отображался какой-то текст,
то это делается с помощью параметра alt

например вот так :

Кошелёк

внесите изменения в код и посмотрите что получиться.

Таким образом код нашей страницы будет такой :

Моя первая интернет страница всего лишь за 5 минут

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


я
буду счастливым и свободным человеком !



Кошелёк

 
Abadon Дата: Пятница, 14.03.2008, 17:08 | Сообщение # 5
Группа:






Пример создания сайта.

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

В этом заключительном уроке курса мы сделаем 2х страничный сайт...например о заработке в интернете.

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

Вверху сайта мы сделаем "шапку сайта". Слева будет меню сайта с ссылками на другие страницы сайта, остальное место будет занимать контент (содержимое ) сайта.

Идея понятна ? Приступаем.

Запускаем Блокнот и пишем наш минимальный набор для создания
страницы
.


<html>


<head>

<title> </title>


</head>


 


<body>


</body>


</html>


Теперь напишем между тегами <title> </title> название нашей страницы,
например вот так


<html>


<head>

<title>Сайт о заработке в интернете. Информация
и ссылки на сайты о заработке в интернете
</title>


</head>


 


<body>


</body>


</html>



Далее разместим теги <center> и </center>, чтобы все содержимое
нашего сайта было размещено по центру страницы.

Если вы не забыли, теги <center> и </center> надо разместить между
<body> и </body>, т.е. вот так


<html>


<head>

<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке
в интернете</title>


</head>


 


<body>


<center>


 


</center>


</body>


</html>


Для создания каркаса страницы мы будем использовать таблицу, но чуть более
хитрую чем мы проходили в HTML-уроке о таблицах. Нам нужна
таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2
ячейки, т.е. вот такая нам нужна таблица :











ячейка 1


ячейка 2


ячейка 3


В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке
3 будет содержимое страницы.


Для того чтобы сделать такую таблицу напишите вот такой код

<table>




<tr>

<td colspan="2"></td>

</tr>




<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>




</table>


Т.е. код нашей страницы будет вот такой :


<html>


<head>

<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке
в интернете</title>


</head>


 


<body>


<center>


<table>




<tr>

<td colspan="2"></td>

</tr>




<tr>

<td></td>

<td></td>

</tr>




</table>


</center>


</body>


</html>


Как видите, в такой вот "хитрой" таблице используется лишь 1 пара
тегов <td> в первой строке таблицы, а не два, как при построении таблицы
2х2. Но зато появился параметр colspan="2". Этот параметр как бы говорит,
какого размера должна быть ячейка. В данном случае ячейка должна быть шириной
в 2 ячейки.


Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 750 пикселей. Из
рассчета что кто-то из посетителей сайта может использовать монитор 800х600
точек, и просматривать более широкий сайт ему будет не комфортно.


Высоту таблицы сделаем 600 пикселей


Т.е. код нашей страницы теперь будет вот такой.


<html>


<head>

<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке
в интернете</title>


</head>


 


<body>


<center>


<table width="750"
height="600"
>




<tr>

<td colspan="2">Здесь у нас будет шапка</td>

</tr>




<tr>

<td> Здесь будет меню</td>

<td> Здесь будет содержимое страницы </td>

</tr>




</table>


</center>


 


</body>


</html>


Чтобы стало видно границы частей сайта - "зальем" область меню и
область шапки цветом. Например вот так


 


<html>


<head>

<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке
в интернете</title>


</head>


 


<body>


<center>


<table width="750" height="600">




<tr>

<td colspan="2" bgcolor="#00CC99">Здесь
у нас будет шапка
</td>

</tr>




<tr>

<td bgcolor="#CCCCCC">
Здесь будет меню
</td>

<td> Здесь будет содержимое страницы </td>

</tr>




</table>


</center>


 


</body>


</html>


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

 
Форум » Обучение » HTML » Сайт за пять минут
  • Страница 1 из 1
  • 1
Поиск:
Rambler's Top100 службы мониторинга серверов Рейтинг Сайтов YandeG