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

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

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

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

Мнениеот Powerplay » 03 Май 2012, 18:08

Сега ще се научим да създаваме страници с помоща на 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 пъти
Не е важно какво гледаш , а какво виждаш !
Аватар
Powerplay
 
Мнения: 344
Регистриран на: 01 Май 2012, 13:00
Местоположение: София , България
skype: ivailo_d94

Компютри, монитори, лаптопи | Тонер касети | Портал за недвижими имоти | Портал за Туризъм: безплатни обяви за почивка


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

Мнениеот ddragon » 07 Май 2012, 08:52

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

Супер добра идея + че определено си е така ( това с учебничето :) )
Аватар
ddragon
Site Admin
 
Мнения: 689
Регистриран на: 22 Дек 2011, 22:27
Местоположение: София
skype: sofiacomputers

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

Мнениеот Powerplay » 07 Май 2012, 12:12

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

Супер добра идея + че определено си е така ( това с учебничето :) )


Поправих го , мерси !
Не е важно какво гледаш , а какво виждаш !
Аватар
Powerplay
 
Мнения: 344
Регистриран на: 01 Май 2012, 13:00
Местоположение: София , България
skype: ivailo_d94

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

Мнениеот Powerplay » 27 Юни 2012, 13:18

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

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

Мнениеот Powerplay » 24 Ное 2013, 20:56

В темата за 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
Не е важно какво гледаш , а какво виждаш !
Аватар
Powerplay
 
Мнения: 344
Регистриран на: 01 Май 2012, 13:00
Местоположение: София , България
skype: ivailo_d94

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

Мнениеот TishoZZ » 25 Ное 2018, 20:34

Полезен материал за начинаещи в сферата
Аватар
TishoZZ
 
Мнения: 10
Регистриран на: 25 Ное 2018, 20:29


Назад към Web Design и Уеб програмиране

Кой е на линия

Потребители разглеждащи този форум: Google [Bot] и 0 госта

cron