HTML - понятия , кодове и създаване на страници

HTML, CSS, JavaScript, Ajax, PHP и всичко за Уеб програмирането, писане на код, оптимизация, идеи и съвети за SEO, администрирането и изработка на сайтове.

Модератори: admin, Powerplay

Аватар
Powerplay
Мнения: 358
Регистриран на: 01 Май 2012, 13:00
skype: ivailo_d94
Местоположение: София , България
Обратна връзка:

HTML - понятия , кодове и създаване на страници

Мнение от Powerplay »

Сега ще се научим да създаваме страници с помоща на HTML.
Първо ще се запознаем на кратко с HTML.
HTML e съкращение от Hypertext Markup Language или език за маркиране на хипертекст".Той е основният маркиращ език за описание и дизайн на уеб страници.

Основни кодове в HTML

<a> - Създава линк към друга страница или към текущата

<a href> - Създава линк към друга страница или към текущата (разликата тук е , че линкът може да е под формата на флаш банер (активна картинка)

<address> - Определя адрес в страницата

<applet> - Определя началото на java applet

<b> - Удебелява шрифта

<base> - Дефинира базов URL адрес във кода на страницата

<basefont> - Дефинира размера , цжвета и фона на базовия шрифт.

<bgsound> - добавя музика

<big> - Уголемява текста с 1 единица повече от основният

<blackface> - Уголемява текста двойно

<blink> - Текстът премигва

<blockquote> - мести в дясно блок от текст

<body> - Променя фона на станицата.

<br> - Прескача ред

<caption> - Дефинира заглавие на таблица

<center> - Центрира груба от текст,изображения и т.н.

<code> - Форматира текст във поле

<comment>- Прави скрити коментари

<font> - Променя размера,цвета на шрифта.

<h1> - Показва текста като заглавие

<head> - Обозначава главната част на документа

<html> - Обозначава че документа съдържа HTML.

<i> - Показва текста с наклон на дясно

<img> - Добавя изображение или анимация

<input> - Обозначава входно поле.

<menu> - Създава списък.

<option> - Създава списък от , който може да се избира.

<script> - Дефинира начало и крайна скрипт

<select> - Добавя списък , от който може да се избира

<small> - Намаля размера на текста с 1 от базовия.

<strike> - Задрасква текста с линия по средата

<strong> - Удебелява шрифта на текста

<sub> - Показва текста в субскрипт.

<sup> - Показва текста в суперскрипт.

<table> - Създава таблица.

<td> - Обозначава клетка в таблица.

<textarea>- Създава текстово поле.

<th> - Обозначава заглавие на таблица.

<title> - Обозначава заглавие на страница.

<tr> - Обозначава ред в таблица.

<u> - Подчертава текста


С кодът , който виждате са представени основните понятия в HTML.
За да го разгледате е необходимо ,да копирате и поставите кода в Notepad....,file,save as и го запазвате , но задължително да се казва index.html
От тук на долу ще ви представя различни начини за създаване на бутони,страници,менюта,таблици и т.н.

Код за потвърждение: Избери целия код

<BODY BGCOLOR="#0000FF">
<center><title>SOFIACOMPUTERS</title></center>
<center><b>София Компютърс</b></center>
<font color="green"><font size="20"><center><blink>София Компютърс</blink></center></font></font>
<center>София Компютърс</center>
<center><font color="red">София Компютърс</font></center>
<center><font size="22">София Компютърс</font></center>
<font size="17"><center><h1>SOFIACOMPUTER</h1></center></font>
<font size="15"><center><i>София Компютърс</i></center></font>
<font size="13"><center><u>София Компютърс</u></center></font>

<center><img src="http://sofiacomputers.net/Images/public_files/vizitka-popravka-remont-komputri.jpg"></img></center>
<font color="white"><font size="12">Това е една най-елементарна страничка колкото да се придобие някаква впредстава за какво става въпрос изобщо.
Ако искате да създавате сайтове с HTML само със четене по форумите няма да стане.Трябва да се вземе едно учебниче и да се прочете.</font></font>
Създаване на менюта,таблици,полета,бутони и т.н.

Създаване на бутон водещ към линк !
Тук ще използваме <a href> и <input type>
Първо си пишем <а href="линк към , който ще ни праща"> , след това ще създадем самият бутон <input type"submit"value="надпис на бутона" style="background:#0002300; color=#ffffff; border:solid 1px #ff0010' /> и завършваме със "</a>"
<a href>....</a>
<input type>....../>
Където #0002300,#ffffff и #ff0010 могат да бъдат най-различни цветове.
Сега би трябвало да се е получило нещо подобно ;

Код за потвърждение: Избери целия код

<a href="http://sofiacomputers.net"><input type="submit" value="SOFIACOMPUTERS" style='background:#0002300; color=#ffffff; border:solid 1px #ff0010' /></a>

Поле за въвеждане : съобщение или коментар !

Задаваме полето с таговете <textarea> и </textarea> , като можем да зададем редове (rows) и колони (cols)

Код за потвърждение: Избери целия код

<p>Какво мислите ?</p><textarea name="coment" rows="2" cols="22"></textarea>

Избор с отметки !

Ще използваме <p>...</p> , </form>....</form>

Код за потвърждение: Избери целия код

<form><p><form><p>Любима марка бира ?</p><selectname="beer"><option>Каменица</option><option>Ариана</option><option>Загорка</option><option>Шшшуменско</option></select></form>
Задаваме кутйиките с "checkbox"


Създаване на падащо меню !

Отново използваме <form> и <option> съответно , формуляр и опции "избирай".Един вид може да се нарече анкета , зависи по какъв начин ще се използва.Тук давам пример със марки ,като Samsung,Sony,Dell,JVC (не ги слагам с цел реклама) :)

Код за потвърждение: Избери целия код

<form><p> Коя е водещата марка в ИТ технологйите?</p><select name="IT"><option>samsung</option><option>Sony</option><option>Dell</option><option>JVC</option></select></form>
Ето сега ще включа всичко , което прочетохте до сега за формулярите в един "код" !

Код за потвърждение: Избери целия код

<BODY BGCOLOR="#0230FF">
<font color="green"><font size="20"><center><blink>София Компютърс</blink></center></font></font>
<center><img src="http://sofiacomputers.net/Images/public_files/vizitka-popravka-remont-komputri.jpg"></img></center>
<font color="white"><font size="12">

<form>Бутон - <a href="http://sofiacomputers.net"><input type="submit" value="SOFIACOMPUTERS" style='background:#0002300; color=#ffffff; border:solid 1px #ff0010' /></a></form>

<center>Поле за въвеждане<p>Какво мислите ?</p><textarea name="coment" rows="20" cols="40"></textarea></center>



<p>Любима марка бира</p>
<form>Ариана:<input type="checkbox" name="beer" value="beer" /><br />Загорка:<input type="checkbox" name="beer" value="beer" /><br />Шуменско:<input type="checkbox" name="beer" value="beer" />
</form></html>



<form><p> Коя е водещата марка в ИТ технологйите?</p><select name="IT"><option>samsung</option><option>Sony</option><option>Dell</option><option>JVC</option></select></form>
Последно промяна от Powerplay на 07 Май 2012, 12:26, променено общо 3 пъти.
Не е важно какво гледаш , а какво виждаш !
Компютри, монитори, лаптопи, таблети, принтери, ремонт, сервиз и поправка на компютри.
т-ц РУМ Младост 2
Аватар
ddragon
Site Admin
Мнения: 742
Регистриран на: 22 Дек 2011, 22:27
skype: sofiacomputers
Местоположение: София
Обратна връзка:

Re: HTML - понятия , кодове и създаване на страници

Мнение от ddragon »

:)
Хубава темичка :)
Само с леееекинко уточнение : <а> линк </а> е връзката, а <а> има атрибути : name, href, target и т.н.

Супер добра идея + че определено си е така ( това с учебничето :) )
Аватар
Powerplay
Мнения: 358
Регистриран на: 01 Май 2012, 13:00
skype: ivailo_d94
Местоположение: София , България
Обратна връзка:

Re: HTML - понятия , кодове и създаване на страници

Мнение от Powerplay »

ddragon написа::)
Хубава темичка :)
Само с леееекинко уточнение : <а> линк </а> е връзката, а <а> има атрибути : name, href, target и т.н.

Супер добра идея + че определено си е така ( това с учебничето :) )
Поправих го , мерси !
Не е важно какво гледаш , а какво виждаш !
Компютри, монитори, лаптопи, таблети, принтери, ремонт, сервиз и поправка на компютри.
т-ц РУМ Младост 2
Аватар
Powerplay
Мнения: 358
Регистриран на: 01 Май 2012, 13:00
skype: ivailo_d94
Местоположение: София , България
Обратна връзка:

Re: HTML - понятия , кодове и създаване на страници

Мнение от Powerplay »

Статията е обновена :)
Добавени са обяснения за :създаване на менюта,таблици,бутони,текстови полета и др.
Не е важно какво гледаш , а какво виждаш !
Компютри, монитори, лаптопи, таблети, принтери, ремонт, сервиз и поправка на компютри.
т-ц РУМ Младост 2
Аватар
Powerplay
Мнения: 358
Регистриран на: 01 Май 2012, 13:00
skype: ivailo_d94
Местоположение: София , България
Обратна връзка:

Re: HTML - PHP Обединяване

Мнение от Powerplay »

В темата за PHP за начинаещи (какъвто съм и аз) ви показах как да създадете съвсем просто устроено уеб приложение.
С този пост ще покажа как се обединяват двата езика , единия изпълнява това , което сте му задали , а другия създава дизайн и оформя цялата страница.

Вече знаем че един PHP кода винаги започва и завършва по следния начин :

Код за потвърждение: Избери целия код

>?php
{ за начало 
и <?
}за край
тоест :
>?
{
КОД
}
<?
За да поставим HTML във PHP код е небоходимо да въведем само няколко реда , а именно :

Да кажем , че имаме някакъв код PHP :
>?php
{
Писали сме някакви глупости , играли сме си "забавлявали сме се;
}
<?
/тук започваме със html

Код за потвърждение: Избери целия код

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
С тези 5 реда казахме : ТИ работи с НЕГО :)
Или вкарахме html във php.

Написал съм примерен код , който изпраща заявка до имейл адрес.
След попълване на полетата и натискане на бутона изпрати (обеснявал съм как се правят такива бутони във темата по нагоре) се изпращат данните до имейла и се появяват във реда по , който са зададени в самият код.

Ето го и него :

Код за потвърждение: Избери целия код

<?php

if(isset ($_POST['Submit'])){
    $Name = addslashes(htmlspecialchars($_POST['Name'])); /добавяне на зявказа полето
    $Family_1 = addslashes(htmlspecialchars($_POST['Family'])); / -------------||-------------
    $Age_1 = addslashes(htmlspecialchars($_POST['Age'])); / -------------||----------------
    $meil_1= addslashes(htmlspecialchars($_POST['Meil'])); /---------------||---------------
    $Code_1 = addslashes(htmlspecialchars($_POST['Antibot'])); /---------||---------------
       
    $to = 'СОФИЯКОМПЮТЪС@мейл';
    $subject = 'Обект';
    $message = 'Ime: "'.$name.'" Family: "'.$Family_1.'" Vuzrast: "'.$Age_1.'" Meil: "'.$meil_1.'"Antibot: "'.$Antibot_1.'";
    $headers = 'From: webmaster@example.com' . "\r\n" .
    $headers = 'From: webmaster@example.com' . "\r\n" .
    'Reply-To: webmaster@example.com' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();
//тук индексирахме от/до къде да се изпраща имейл-а и как да се появи текста в самият имейл.
    
    mail($to, $subject, $message, $headers);
    
}

?>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        <form action="index.php" method="POST">
            Име : <input type="text" name="Name" value="Name"/><br /> 
            Фамилия : <input type="text" name="Family" /><br />
            Въпрос: <input type="text" name="Age" /><br />
            Антибот : 132-123 е : <input type="Antibot" name="Code" /><br />
            Вашият имейл :  <input type="Antibot" name="meil" /><br />
            <input type="submit" name="Submit" value="Изпрати" />
        </form>
    </body>
</html>
Разбира се всеки може да го моделира както желае.
Няколко дребни неща :
- промяна на фона
- добавяне на мигащи текстове (привличат внимание) за <blink> говоря :)
- добавяне на някаква картинка/лого
украса на бутон може да го заместите с малка картинка/лого (показвал съм го това) "<a href>"

Тука вече играе въображението , ако имате въображение ще имате и визия/дизайн :)

Ако някой иска да си го украсява.
Ако ще се ползва имайте предвид , че не съм филтрирал нищо и лесно може да се направят злоупотреби със SQL Injections + XSS
Не е важно какво гледаш , а какво виждаш !
Компютри, монитори, лаптопи, таблети, принтери, ремонт, сервиз и поправка на компютри.
т-ц РУМ Младост 2
Аватар
Powerplay
Мнения: 358
Регистриран на: 01 Май 2012, 13:00
skype: ivailo_d94
Местоположение: София , България
Обратна връзка:

Re: HTML - понятия , кодове и създаване на страници

Мнение от Powerplay »

По добре късно , отколкото никога.
Напоследък (1 година) не ми остава време да следя форума и да създавам уроци.
Мога да препоръчам литература от която да прочетеш :)
Не е важно какво гледаш , а какво виждаш !
Компютри, монитори, лаптопи, таблети, принтери, ремонт, сервиз и поправка на компютри.
т-ц РУМ Младост 2
Публикувай отговор

Обратно към “Web Design и Уеб програмиране”

Кой е на линия

Потребители разглеждащи този форум: 0 регистрирани и 1 гост