Уроки создания собственной странички/сайта

F

Fancb

Здесь, по шагам, мы начнем осваивать создание своей странички/сайта.



Многие из вас хотели бы уметь делать хотя бы простенькие сайты, но представления не имеют "откуда ноги растут". Эта тема призвана помочь вам сделать первый шажок в освоении по-своему интересной темы. Безусловно, она очень и очень может пригодится любому из вас в будущем.

Итак, начнем.


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

Перво-наперво, что необходимо усвоить, так сказать впитать с молоком ЛЮБОМУ кодеру - это тот факт, что, если вы хотите чтобы страница отображалась корректно, то есть так, как вы задумали, необходимо самой первой строкой указывать так называемый ДОКТАЙП!

А вот собственно говоря и строка кода с ним:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

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

вы должны на ОТЛИЧНО усвоить это обязательное правило, как и многое другое из того, что я буду постепенно тут выкладывать.

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

А подадим мы ему вот что: <HTML> - таким образом мы объявляем браузеру о начале документа. Далее следует <HEAD> и сразу за ним <title>. Что представляют из себя эти два новых объявления именуемые тегами (теги). <HEAD> есть ничто иное, как заголовок документа, однако сейчас мы не будем подробно на нем останавливаться, в реальности он понадобится нам несколько позже. Для вас же ВАЖНО принять обязательность использования данного тега в документе. Зато <title> нам пригодится уже сейчас.

Посмотрите внимательно на то, что написано в браузере на самом верху (так скажем на верхней синей полоске), например, когда вы на странице YANDEX.RU. Там написано Яndex. Воспользовавшись тегом <title> мы с вами сможем разместить там все, что душе угодно, например: "МИГРАЦИЯ СУСЛИКОВ В СЕВЕРНУЮ КАНАДУ". Написав эту чудесную фразу мы с вами ОБЯЗАНЫ сказать браузеру, точнее его обработчику HTML-кода, что объявленный тег - его функция, окончен. Делается это простым способом. К тегу добавляется слеш: "/" и выглядит это вот так: </title>. По умолчанию, по факту закрытия <title> мы сразу же скажем браузеру о том, что и тег <HEAD> у нас также окончился и сам документ <HTML>. В итоге у нас получается следующая конструкция:

<HTML>
<HEAD><title>Миграция сусликов в Северную Канаду</title></head>
</HTML>

Не будем задерживаться, не будем, помчимся дальше.

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

<HTML>
<HEAD><title>Миграция сусликов в Северную Канаду</title>
<STYLE>
body { margin: 0;
padding: 0;
}
</STYLE>
</HEAD>
<BODY border="0", bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
Отступы от края окна браузера до контента убиты. Теперь у нас все буит ОК :0)
</BODY>
</HTML>

Теперь нам, наверное, имело бы смысл сказать всему миру, что это у нас за ресурс и кто его создатель/обладатель?! :0) Давайте так и поступим.


<HTML>
<HEAD><title>Миграция сусликов в Северную Канаду</title>
<STYLE>
body { margin: 0;
padding: 0;
}
</STYLE>
</HEAD>
<BODY border="0", bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0"
 
S

SeverinD

как всегда... пообещают строку с кодом, а мы на это и попадаемся ))) Страницу предполагается делать полностью на html?
 
F

Fancb

Теперь нам, наверное, имело бы смысл сказать всему миру, что это у нас за ресурс и кто его создатель/обладатель?! :0) Давайте так и поступим.


<HTML>
<HEAD><title>Миграция сусликов в Северную Канаду</title>
<STYLE>
body { margin: 0;
padding: 0;
}
</STYLE>
</HEAD>
<BODY border="0", bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0"
<TABLE>
А вот и новый страшшный зверь :0) И нафига он нам теперь?! Нужен, еще как нужен. Ведь мы же хотим покеазать миру именно то, что мы хотим показать, а не то, что вытворит браузер. Этим тегом мы говорим обработчику браузера, что нами инициализируется-начинается таблица. А именно с таблицей мы и можем вытворять многое из того, что нам хотелось бы, но пока не доступно. Но перед этим давайте скажем обработчику, что нам не нужны никакие отступы по умолчанию, что потом, когда-нибудь, если будет нужно, мы сами их зададим. Итак, говорим:


<HTML>
<HEAD><title>Миграция сусликов в Северную Канаду</title>
<STYLE>
body { margin: 0;
padding: 0;
}
</STYLE>
</HEAD>
<BODY border="0", bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<TABLE cellspacing="0" cellpadding="0"></TABLE> (мы же помним о том, что надо закрывать теги?!)
</BODY>
</HTML>

Ура! Мы убрали отступы от краев таблицы и готовы сделать миру первое заявление! Теперь все в нашей власти! :0)
 
F

Fancb

Что ж, друзья мои, пробил час не просто сказать, а показать миру, что мы что-то можем! Давайте для начала сделаем это так:

<DIV><H1> Привет гостям, THIS SITE is MINE! :0) </H1>/DIV>

А вот и полный код примера:

<HTML>
<HEAD><title>Миграция сусликов в Северную Канаду</title>
<STYLE>
body { margin: 0;
padding: 0;
}
</STYLE>
</HEAD>
<BODY border="0" bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<TABLE cellspacing="0" cellpadding="0"><DIV><H1> Привет гостям, THIS SITE is MINE! :0) </H1></DIV></TABLE> </BODY>
</HTML>

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

<TABLE cellspacing="0" cellpadding="0" width="100%">
Добавив width="100%" мы сказали браузеру, что таблица у нас 100% шириной и благодаря этому объявлению мы можем теперь сделать то, что исправит положение на нашей страничке:

К <H1> добавим уникальное имя first:
<H1 class="first">Привет гостям, THIS SITE is MINE! :0)<H1> и еще один штрих, наверх и это ОБЯЗАТЕЛЬНО, добавим то, что мы хотим с заголовком намутить:

<STYLE>
body { margin: 0;
padding: 0;
}

H1.first{
color: green; text-align: center;}
</STYLE>

Мы только что установили текст по центру: text-align: center; и заодно покрасили его: color: green;

Вот теперь ВСЯ утка наша! Гляньте! Совсем другое дело, не так ли?!
Смотрим результат:






<HTML>
<HEAD><title>Миграция сусликов в Северную Канаду</title>
<STYLE>
body { margin: 0;
padding: 0;
}
H1.first{
color: green; text-align: center;}
</STYLE>
</HEAD>
<BODY border="0", bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<TABLE cellspacing="0" cellpadding="0" width="100%"><DIV><H1 class="first"> Привет гостям, THIS SITE is MINE! :0) </H1></DIV></TABLE> </BODY>
</HTML>

Продолжение следует!
 
I

illyn

Когда уже будим добавлять рисунки в сайт ? ))) У меня есть код в рисунок фставяется и действует как черфь ) Не атакует только создателя Ыыы
 
F

Fancb

От злодей, лишь бы крякнуть кого-нить. Не спешите, доберемся и до фанни-гейм :0)
 
B

baze12

Ну расскажите как правильно добавлять картинки,чтобы при щелчке на них был переход на другой сайт???
 
F

Fancb

Я правильно понял, что Вы хотите, что бы, когда пользователь кликает на изображение его перенаправляло на другой ресурс?
 
I

illyn

)) Типа да , и причом куда подальше, типо на сайт Бориски Моесеева )))
 
U

unnutz

Мега-вопрос:
есть зверски интересная идея.Такого в веб еще не было.Примерно представляю структуру.На пути к созданию этого портала 3 проблемы:лень,не могу правильно настроить связку пиашпи+апач+мускул,нет толкового руководства.Как решить 2 и 3 проблемы?Спасибо
 
G

Gruch_

Ну вот вопрос:
в чём разница при использовании class, как здесь <H1 class="first">, и ID как здесь <div id="quickSearch">???
 
F

Fancb

Всего лишь в том, что к class можно обращаться из любого места кода сайта, сколько угодно раз. id же можно юзать лишь однажды на сайте и все. И class и id не зависят от какого-либо конкретного тега.

P.S.
Спасибо за вопрос! Хоть кто-то задал вопрос по существу.
 
G

Gruch_

А почему бы тогда не использовать всегда class и забыть про одноразовый id?
 
F

Fancb

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

<html>
<head>
<style type="text/css">
.main {margin:0;padding:0;text-align:center;}
#other {font-weight:bold;}
</style>
<div class="main">test</div>
<div class="main">test1</div>
<div class="main" id="other">test2</div>

Третий div при помощи id мы вывели за общепринятые для div-ов данного документа css рамки, добавив ему индивидуальные параметры. В css файле, благодаря id нам проще будет отыскать параметры третьего div-а и не запутаться в причинно-следственной связи интерпретации. Благодаря id мы сэкономили массу символов, можете посчитать. Также стоит учитывать то, что даже при прочих РАВНЫХ условиях интерпретация при помощи css файла дает конечный вес документа чуть ли не в два раза легче, чем если бы все писалось в теле страницы.
 
G

Gruch_

Спасибо! Теперь всё понятно.
Но хотелось бы ещё узнать о процессе верстки сайта в подробностях.
Хотя я так понимаю, об этом будет труднее рассказать)))
 
F

Fancb

Нет, конечно :0) Если Вы так же по существу, в какой-либо форме продолжите задавать вопросы. Велкам :0)
 
G

Gruch_

Допустим, дан какой-то макет сайта. И вот хотелось бы узнать всё "от" и "до" о "преобразовании" этого макета в html-страницу. Как это всё происходит? Более конкретизировать свой вопрос не могу))))
 
F

Fancb

Трудного тут нет ничего для меня. Но, пока не будет сформулированного вопроса не будет и ответа. Если кому-то интересно что-то, он напряжется и найдет способ формулировки по существу - и это правда :0)

Для облегчения своей нелегкой доли, разбейте задачу на логические части, присвойте каждому логическому блоку значение-вопрос и задайте его. И тогда я, конечно же, помогу Вам.
 
G

Gruch_

А чем вам "не нравится" вопрос, заданный в прошлом сообщении?
 
F

Fancb

Он не по существу, он общий. Я готов помогать, но ответами только на локальные составляющие. Помощь сверстать страницу, и фактически сверстать ее - это разные вещи. В вашей ситуации для начала надо визуально разделить на как минимум следующие составляющие макета: Шапка, Меню, Тело страницы, Футер и разрезать страницу хотя бы на эти части. Сделайте это.
 
G

Gruch_

Только вот дело в том, что макета у меня пока нет.
Не могли бы вы дать ссылку, откуда можно скачать?
Макет нужен любой, чисто для тренировки
 
F

Fancb

Могу Вам предложить сделать то, что и нужно сделать - яндекс-гугл и иже с ними. В строке пишем: макет сайта скачать или макет для верстки скачать или исходник сайта или шаблон сайта скачать бесплатно и т.п. В вывалившихся сайтах ище нужное. Обычно они в архиве и в нем же в отдельной папке обычно лежит исходник. internet-tehnologies в принципе то, что Вам нужно. ПОдберите интересующий архив и дайте мне на него ссылку тоже, чтобы мы об одном и том же макете говорили. После этого продолжим.
 
F

Fancb

Я мог напутать, но там вроде бы 5 вариантов... Как-то не серьезно получается.
 
F

Fancb

Все в порядке. У них глюк был, закидывали на предыдущую страницу.
 
F

Fancb

Ну вот, макет у нас у обоих есть. Начинайте верстать. Какие непонятки, говорите, будем разбираться по факту.
 
N

news_ru_ua

Как разместить презентацию РРТ на сайте?
Как ее конвертировать в HTML?
Где можно скачать конвертер бесплатно?(желательно русифицированный)
Заранее благодарю!
 
F

fagotta

www.xtina-aguilera.ucoz .ru и хотела бы узнать вот на моей страничке есть фото на главной страницы как сделать написанные на нем слова ссылками?
 
I

igorosipenko

У меня такой вопрос, я создаю сайт(примерно 10-15 страниц) хочу выложить его в Нет. Будет ли возможность исправлять его дополнять и т.д только у меня?
 
S

SeverinD

2Helen 9 Devil
www . htmlbook . ru/html/map.html - про изображения-карты, то что вам нужно

2Анна Volchiza Волкова
если пароль на доступ будет только у вас, то и возможность править сайт будет только у вас
 
I

igorosipenko

то есть при регистрации на РУ домене выдается пароль на доступ, я правильно поняла?
 
S

SeverinD

для того чтобы разместить сайт в инете нужно
самый сложный способ.
1)Зарегистрировать домен, например на nic . ru. вы получите пароли на домен
2)Зарегистрировать хостинг, анпример на rusonix . ru, там дадут пароли на непосредствнный доступ(контрольную панель).
После этого надо будет привязать домен к хостингу.

Способ попроще
1)Регистрируем хостинг, например на rusonix. ru, сразу на год, за эо получаете в подарок домен(какой захотите, если конечно он свободен).
они там сами регистрируют вам домен, привязывают его к хостингу, высылают вам пароли на всё.

Самый простой способ, вылить сайт на narod . ru, это сервис Яндекса по размещения сайтов на html, но про домен второго уровня в зоне ru можете забыть.
 
A

Arry1

Нафига народ.ру? Есть хороший бесплатный хостинг без рекламы на by*ru(без пыха, конечно, но есть сси) с возможностью привязки домена второго уровня или третьего уровня net*ru .org*ru .pp*ru

В самом начале автор темы давал код(#5): я не понял, нафига элемент <div> помещать внурь элемента <table>?

Потом вы не ответили на вопрос чела #9 <Ну расскажите как правильно добавлять картинки,чтобы при щелчке на них был переход на другой сайт???>
Конечно, вопрос глупый, но может человек действительно впервые сталкивается с html?
Отвечаю: <a href="ЮРЛ, куда нужно перейти при щелчке"><img src="ЮРЛ вашей картинки" alt="Описание вашей картинки" /></a>
 
A

Arry1

Есть два варианта:
На пыхе:
<?php
$now=date("h:i:s Сегодня d/m/20y");
echo $now;?>
Можно еще на яваскрипте:
<div id="time"></div>
<script src="/files/time.js" type="text/javasсript"></script>
Затем создать файлик time.js в каталоге /files/
div_time=document.getElementById("time");
time_now=new Date();
div_time.innerText=time_now.getHours()+":"+time_now.getMinutes()+":"+time_now.getSeconds()+" сегодня "+time_now.getDate()+"/"+time_now.getMonth()+"/"+time_now.getFullYear();
div_time.textContent=div_time.innerText;
 
P

pelageja

2 Brave Red Fox:

id это индификатор для клиентских скриптовых языков (VB,JS ...) его можно использовать сколько угодно раз =)
class это класс для таблицы стилей

Пример:


<html>
<head>
<style type="text/css">
#main {margin:0;padding:0;text-align:center;}
.ups { color:#123456;}
</style>
<script>
function test(id)
{
alert(id);

}
</script>
<div id="main" class="ups">test</div>
<div id="main" class="ups">test1</div>
<div id="main" onclick="test(this.id")>test2</div>
 
F

Fancb

Вы, судя по всему, плохо понимаете, о чем речь, мат. часть Вам в помощь, приходите завтра :0)
 
P

pelageja

Специально для Brave Red Fox :

Особым языком :

class - Класс для таблиц стилей
id - Индификатор объекта для скриптовых клиентских языков
 
F

Fancb

Специально для Алексей dLex Постников:

Максимально упрощенно, доступности ради:

class - класс
id = идентификатор

<div class="простота решает" id="а, порой, и спасает">
Использование одновременно обоих позволяет переопределять ИМЕННО данный тег, сохраняя форматирование остальных <div> на уровне "простота решает".

Почему надо использовать один раз, можно догадаться с трех попыток, если будет желание :0)

Можно не угадывать, можно посетить, например, htmlbook.ru - там все подробно много раз расписано.
 
K

korchasa

Есть такой бесплатный редактор-ucoz,ru, классные сайты из сырья получаются.(и бесплатно)
 
F

Fancb

Возникает небезосновательное ощущение, что Вы НЕ программист.

1. Потому, что рекомендуете совершенно кошмарное изделие.
2. Потому, что утверждаете, что этот ужастик делает хорошие сайты.
3. Потому, что рекламируете бесплатный продукт.

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

П.С.
Я бы не написал вышеописанное, если бы Вы написали, например: "Есть бесплатный конструктор сайтов, он достаточно легок в освоении и управлении, и вы можете попробовать свои силы с его пощью, а, если уж не получится, то обратиться к специалисту". Вы же, фактически, вводите людей в заблуждение. Как минимум потому, что он далеко не так понятен, как его рекламируют, особенно новичкам.

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

pelageja

Специально для Brave Red Fox :

Я написал что как и class так и id можно много раз использовать поэтому ваш ответ что id как индификатор можно использовать один раз неправильный
и еще если до этого дошло id это больше для скриптов а class для таблиц стилей ПРО ЧТО Я ВСЕ ЭТО ВРЕМЯ И ПИСАЛ
 
F

Fancb

Специально для Алексей dLex Постников:

В том то и дело, что id в случае css является стандартным атрибутом тега, предназначенным для того, чтобы ПЕРЕОПРЕДЕЛИТЬ уже определенное. Конечно, понятно, что можно id использовать много раз, но лишь один раз ДЛЯ ОДНОГО ТЕГА. Один и тот же id нужно использовать для одного тега лишь один раз, а вот class, много раз - вот о чем пишу я :0)

Топик нельзя закрывать, вдруг еще какие новости от кого-нибудь узнаю - глядишь польза мне и другим будет. Вон выше,в идите, ucoz рекламируют, у меня аж волосы дыбом встали :0)
 
K

karudos

слушайте очень необходимая информация !!! спасибо вам огромное, теперь у меня есть личная страница на бесплатном хостинге !!! там моё имя посередине !!!! клёвоооо
 
N

Nometa_blog

а еще,если хорошо порыться то можно найти postroika,ru и скачать учебники,которые действительно написаны как мануалы,пошагово. для совсем новичков там очень хорошо описано.
 
N

nagval

2 опытных копирайтера (и поэтому быстро!!!), крупные заказы или долгосрочное сотрудничество, от 2х уе за кило, абсолютно любая тематика. Образование журналистика и критика. Только Питер. В личку.

А вообще, простите за спам))) заказы всем нужны)))
 

Статистика форума

Темы
200.635
Сообщения
380.523
Пользователи
327.873
Новый пользователь
lightnight
Сверху Снизу