Як зробити веб-сайт, частина 2, сайт повністю зроблений з 0 в HTML, CSS з галереєю зображень - відеоурок

У цьому посібнику описано сайту за допомогою HTML і CSS, що охоплюють всі етапи: розробка веб-сайтів,
створення облікового запису на безкоштовному хостингу і, нарешті, завантаження файлів наш веб-сайт на цьому хостингу, безкоштовний хостинг є швидкий метод розміщення веб-сайту наш інтернет протягом декількох хвилин, недоліком цього методу є те, що ми будемо мати деякі оголошення відображається в усі часи у верхній частині (заголовок вище).

Той, хто хоче відкрити веб-сайт, ви повинні знати HTML і CSS, не потрібно бути експертом в HTML (HYper Text Markup Language), але деяка інформація про код абсолютно необхідна для розуміння того, як ці речі працюють.

Навіть якщо ви будуєте один сайт, ви до сих пір не мають ні найменшого уявлення про те, що відбувається через ці файли вимагають періодичної корекції помилок або досягнення змін.

Багато людей тікають від коду, багато уподібнюють код до ієрогліфів, це зовсім не так, хтось одного разу сказав: "КОД - ПОЕЗІЯ", він мав рацію, коли бачиш, що щось народжується з ряду рядків коду, ти відчуваєш себе прекрасно, будуєш віртуальний світ лише з клавіатури та миші.

Ми довго використовували програми, побудовані програмними компаніями, ми займалися лише роботою з комп'ютером, час займатися програмуванням, насправді це не мова програмування, це "мова розмітки", але ми будемо посилатися на це як мова програмування, тому що це звучить досить дивно "мова розмітки", HTML - одна з найпростіших мов програмування (розмітка), яка використовується в наш час, ми бачимо HTML на будь-якому сайті, багато програмного забезпечення мають Вони компоненти HTML, ця мова програмування є скрізь, саме час її вивчити.

У перший раз, може бути менш складною, але якщо ви обережні, ніж ви відразу зрозумієте, що не все так складно прості і красиві речі, ми створюємо щось своїми руками, це найголовніше.

Ми будемо вивчати основи, то ми дізнаємося, як вводити текст на веб-сторінці, то ми організуємо і колір тексту, ми використовуємо CSS стиль сторінки (каскадні таблиці стилів), з яким ми будемо розміщувати всі елементи сторінки HTML у всіх так, що ви будете розміщувати на нашому сайті зроблений, щоб виглядати як єдине ціле.

Ви дізнаєтеся прості методи, основні HTML і CSS, хоча ці базові речі в HTML і CSS, створить огляд приємний.

Для цього уроку ви повинні запастися терпінням і увагою, це керівництво не те, що ми можемо дозволити собі вести мало, якщо спіральними кілька секунд ви можете пропустити щось дуже важливе, і ви не побачите більше після цього не має сенсу, концентрація інформація надзвичайно висока, і саме тому я прошу вас бути дуже, дуже обережним.

Після цього уроку, навіть інтенсивний курс, я б сказав, ви будете мати краще уявлення про те, що HTML і CSS, ви можете контролювати код добре, і ви в повній мірі зрозуміти HTML документ, відчуваючи, що HTML не тільки масив heroglife буде розсіюватися, ви знаєте, що це таке, коли ви дивитеся на HTML або CSS один.

Ми дізнаємося про мітки (теги), ми маємо тут деякі приклади мітки (теги), які ви можете використовувати в HTML-документі, не хвилюйтеся, не потрібно запам'ятовувати їх все, що вам потрібно дізнатися тільки основи в першій таблиці інше можна знайти тут на сайті або в мережі, коли ви потребуєте в них.

Навіть таблиці впорядковані ці теги, зроблені з використанням HTML.

Основні елементи (теги).

Визначає формат веб-файл
заголовок документа
Tilul документ
сторінка тіла HTML
BGCOLOR = колір Колір фону сторінки
TEXT =колір Колір тексту на сторінці
LINK =колір колір сторінки невідвіданих посилання
VLINK =колір Відвіданого посилання колір сторінки
ALINK =колір Колір посилання під час користувача натисніть exacutat
BACKGROUND = URL сторінка фонове зображення
пункт
<Hn> <Hn> Підзаголовок рівні документа (n = 1-6)
Конкретні атрибути обрамленні тексту
РОЗМІР =n Розмір тексту 1-7
FACE ="А, б" Вкажіть шрифт: aЯкщо є можливість, або b
COLOR =s Колір тексту: або ім'я кольору або значення RGB
новий рядок
інформація відформатований
HTML Comenatriu
Матеріальні центри сторінки
горизонтальна лінійка
РОЗМІР =x Висота Правитель в пікселях
Ширина =x Ширина Правитель в пікселях або відсотках
NOSHADE Відключити відображення тіні для горизонтальної лінійки
ALIGN =x Вирівнювання горизонтальна лінійка на сторінці (зліва, по центру, справа)
COLOR =x Колір горизонтальна лінійка (тільки IE)
якірна Mark
HREF =URL гіпертекстового посилання
HREF =#name Посилання на внутрішній якір
Name =ім'я Визначення внутрішніх анкерів

Елементи для списків .

опис визначення
Визначення типу Список
У визначенні
список можливостей
<OL Нумерований список (під номером)
TYPE =чайові Нумерація. Можливі значення: A, A, I, я, 1
START =x Число почав впорядкованого списку
<UL Ненумерованний список (маркований)
TYPE =форма Форма закладки. Можливі значення: коло, квадрат, диск.

Елементи форматування символів .

Вставити текст виділено жирним шрифтом
Вставити текст курсивом
Вставити виділений текст
Моноширинний шрифт тексту
цитування bibliogarfica
програма Лістинг
Підсвічування логіки Стиль
Текстова клавіатура
Підкреслюючи сильна логіка
Програма або змінна
<BASEFONT РОЗМІР = n> Визначає розмір шрифта сторінки

Елементи для рамок .

Визначення написання сторінки
COLS =x Число і відносний розмір стовпців
ROWS =x Лінії крупності і відносні
BORDER =x Визначає статус "увімкнено" або "вимкнено" для кадру FRAMESET (1 або 0)
frameborder = x Визначає розмір кадру
FRAMESPACING = x Обсяг простору між двома сусідніми кадрами
Визначення конкретного кадру
SRC =URL URL-джерело для фрейма
NAME =ім'я Ім'я кадру (використовується разом із TARGET = ім'я як частина опорного знака
скролінг =SCRL Визначити опції бар derulare.Valori можливо: на (активувати), вимкнений (неактивний), Auto (автоматичний)
frameborder =x Розмір кордону навколо кадру
MARGINHEIGHT =x Більше простору вище і нижче певних рамках
MARGINWIDTH =x Suplimetar простір зліва і справа для конкретного
Розділ сторінки відображаються для користувачів, які не можуть бачити рамку
Framework (тільки (IE)
SRC =URL вихідний кадр
NAME =s Ім'я вікна (корисно для TARGET)
ВИСОТА =x Вбудована висота рами
Ширина =x Вбудована рама ширина

Елементи для таблиць .

HTML-таблиці
BORDER =x стіл кордону
CELLPADDING =x Більше простору всередині елементів таблиці
CELLSPACING =x Більше простору між елементами таблиці
Ширина =x Введені ширина столу
КАДР =значення Точне регулювання столу
ПРАВИЛА =значення Лінійки тонкого регулювання столів
BorderColor = колір Технічні характеристики Колір кордону таблиці
BORDERCOLORLIGHT = колір Світліший колір з двох кольорів вказано
BORDERCOLORDARK = колір Чим темніше колір з двох кольорів вказано
ALIGN =залишити Вирівнює таблицю до лівого краю сторінки, а текст обтікає праву сторону
ALIGN =право Вирівнює таблицю до правого краю сторінки і текст тече зліва
HSPACE =x Suplimetar горизонтальне простір навколо столу
VSPACE =x Suplimetar вертикальне простір навколо столу
COLS =x Визначає кількість стовпців таблиці
Визначає набір визначень стовпців за допомогою розмітки
<COL Ширина =x> Визначає ширину шпальти в пікселях
Визначає заголовок таблиці
Визначає тіло таблиці
рядок таблиці
BGCOLOR =колір Визначає колір фону для всієї лінії
ALIGN =вирівнювання вирівнювання осередків на поточному рядку (лівий, центральний, правий)
Осередок даних таблиці
BGCOLOR =колір Визначає колір фону для даних клітин
= Об'єднання стовпцівx Кількість стовпців, яка охоплює поточні дані осередки
RowSpan =x Число ліній, що тягнуться поточні дані осередки
ALIGN =вирівнювання Вирівнювання матеріалу осередку date.Valori можливо: (зліва, справа, в центрі)
VALIGN =вирівнювання Вертикальне вирівнювання матеріалу з клітки date.Valori можливо: (верх, низ, середина)
BACKGROUND =URL Задає фонове зображення для елементу таблиці
Nowrap Не допускати розщеплення рядків тексту всередині комірки
ALIGN =базова лінія Вирівняти осередку даних до базової лінії сусіднього тексту
ALIGN =характер Вирівнює стовпчик за певним символом (символом за замовчуванням є ".")
ALIGN =виправдовувати Зіставте як лівий край і правий край тексту

Елементи для додавання зображень.

<IMG Маркування вхідних зображень
SRC =URL Вихідний файл графічний
ALT =текст Альтернативний текст для відображення, при необхідності
ALIGN =вирівнювання Вирівнювання зображення на сторінці. Можливі значення: верхнє (вгорі), середній (в середині), нижня (внизу), ліворуч (ліворуч), праворуч (праворуч)
ВИСОТА =x Висота зображення (в пікселях)
Ширина =x ширина зображення
BORDER =x Рамка навколо зображення, коли він використовується в якості гіперпосилань
HSPACE =x Більше простору навколо зображення по горизонталі (в пікселях)
VSPACE =x Більше простору навколо зображення по вертикалі (в пікселях)

Форми елементів.

Активний Форма HTML
ACTION =URL CGI програма на сервері, який приймає дані
МЕТОД =метод Як дані передаються на сервер (GET або POST)
<ВВІД Кемп текст або інші пристрої введення даних
TYPE =варіант Тип поля введення . Можливі значення: текст, пароль, прапорець, прихований, файл,
Радіо, подати, скидання, зображення.
NAME =ім'я Поле символічне значення імені
VALUE =значення текстове поле Content за замовчуванням
ПЕРЕВІРЕНО = варіант Кнопка / прапорець відзначений за замовчуванням
РОЗМІР =x Кількість символів в текстовому полі
РОЗМІР =x Максимальна кількість символів
Група прапорців
NAME =ім'я Поле символічне значення імені
РОЗМІР =x Кількість пунктів меню, які відображаються один раз (за замовчуванням = 1)
КІЛЬКА =x Дозволяє множинний вибір пунктів меню
<ОПЦІЯ Особливий вибір у галузі
VALUE =значення Отримане значення цього меню вибору
Табір армування текст на декількох рядках
NAME =ім'я Поле символічне значення імені
ROWS =x Кількість рядків текстового поля
COLS =x Кількість колонок (символів) в рядку текстового поля
Частка логічної форми в частинах
Назва пов'язана безліч полів (fieldsets)
ALIGN =s Вкажіть легенду вирівнювання (інформація) відображається (зверху, знизу, зліва, справа)
TabIndex =x Вкажіть деталі замовлення, коли користувач натискає кнопку Tab
ACCESKEY =c Який забезпечує конкретний ключ від ярлика клавіатури, пов'язаного з конкретним пунктом
ІНВАЛІДІВ Елемент є неактивним, але відображається на екрані
тільки для читання Елемент відображається на екрані, але не може бути змінений

Додаткові елементи.

Конкретна інформація про моделі стилів
TYPE =Val Тип моделі стилю. Зазвичай "текст / css"
Як правило, включає в себе сценарій Javascript у вашому веб-сторінці
МОВУ =мова Мова, що використовується
EVENT =подія Подія, яке ініціює виконання конкретних сценаріїв
ДЛЯ =numeobiect Ім'я об'єкта сторінка, на якій діє скрипт

СКАЧАТИ HTML ТАБЛИЦІ З бирками

Якщо ви хочете відвідати сайт провели підручник, ви можете отримати доступ за цією адресою: http://www.videotutorial.150m.com.

Я рекомендую вам розпакувати вкладення і вивчити три файли HTML або CSS-файл за допомогою Notepad ++ або іншої програми для редагування веб-сторінок таким чином, може внести зміни Кау навіть можете робити нотатки під час неї ви дізнаєтеся, HTML без вас рахунок.

Ви Бажаємо вам приємного і вітати Вас на наступних навчальних програм в цій серії і за її межами.

ФАЙЛИ TEST СКАЧАТИ

Ден Constantin
tutorialegimp.blogspot.com
Cristian Cismaru: Мені подобається все, що пов’язано з ІТ та З, я люблю ділитися досвідом та інформацією, яку накопичую щодня. Вчусь навчати вас!

Коментарі (333)

  • Дуже приємно, тонни інформації, що міститься в цьому посібнику.
    Цей підручник можна назвати настій з HTML і CSS.
    Може бути, ви не отримаєте, щоб дізнатися через кілька місяців ви можете дізнатися тут через годину або близько того, я бачив все це перед публікацією, і можу сказати, що вразило мене процитувати інформація може поміститися в підручнику.
    В якийсь момент я відчув потребу випити води, хоча я дивився тільки підручник, і я не хочу думати, цитуючи Ден пив воду після цього.
    Існує щось не вивчити HTML і / або CSS після цього уроку.

  • Аолеу, чого я намагався навчитися близько 3 місяців, мабуть, не маю часу ...
    Велике спасибі, я уважно дивитися!

  • Cristi-адміністратораДуже приємно, тонни інформації, що міститься в цьому посібнику.
    Цей підручник можна назвати настій з HTML і CSS.
    Може бути, ви не отримаєте, щоб дізнатися через кілька місяців ви можете дізнатися тут через годину або близько того, я бачив все це перед публікацією, і можу сказати, що вразило мене процитувати інформація може поміститися в підручнику.
    В якийсь момент я відчув потребу випити води, хоча я дивився тільки підручник, і я не хочу думати, цитуючи Ден пив воду після цього.
    Існує щось не вивчити HTML і / або CSS після цього уроку.

    так, ти прав, Крісті, але я розчарований, тому що я думав, що ти зробиш підручник :( але все одно браво дан дуже гарний підручник

    • Не приємно, що ти сказав, і я, чесно кажу вам, цей чоловік боровся близько півтори години, щоб навчити тебе робити сайт з нуля, і ти кажеш, що розчарований, бо він цього не зробив? Ви можете уявити, скільки роботи вкладено людиною і скільки часу він втратив, щоб навчити нас основам html та css, подумайте, перш ніж відкрити рот, що це не влаштовувало б вас подавати роботу, а потім залишайте інші непотрібні коментарі, наприклад ви розчаровані, що він не поставив, хтось ще створив цей підручник, дякую, що вам є де вчитися;)

  • дзьоб:
    Cristi та ви маєте рацію, але я розчарований, тому що я думав, що ви будете робити tutorialu але в будь-якому випадку даний BRAVO дуже хороший tutorialu

    Як ви думаєте, що серія про "Як створити сайт" закінчилася.
    У наступному уроці буде мене.
    Тому, що наступний урок мені потрібно буде спостерігати цей підручник, проведений Дан.
    Те, що я представляю відрізняється від підручника я зробив аза Dan, але інформація в ньому буде незамінний для правильного розуміння речей.
    Є кілька способів публікації контенту в Інтернеті, але всі вони мають спільний знаменник, HTML і CSS, без них ви нічого не можете зробити.

  • Cristi-адміністратора:
    Як ви думаєте, що закінчили серію на "Як зробити веб-сайт".
    У наступному уроці буде мене.
    Тому, що наступний урок мені потрібно буде спостерігати цей підручник, проведений Дан.
    Те, що я представляю відрізняється від підручника я зробив аза Dan, але інформація в ньому буде незамінний для правильного розуміння речей.
    Є кілька способів публікації контенту в Інтернеті, але всі вони мають спільний знаменник, HTML і CSS, без них ви нічого не можете зробити.

    Привіт Cristi, прийде серію PHP або JS?

  • Alex:
    Привіт Cristi, прийде серію PHP або JS?

    Ми говоримо про все, але і PHP і JS-сайт зв'язується з HTML, HTML не може бути без.
    PHP використовується більше для отримання даних із баз даних, веб-сторінки все ще знаходяться на HTML, чи ми говоримо про динамічні сайти (php, dhtml, asp, jsp, cf) або ми говоримо про статичний сайт, ми будемо використовуйте мову HTML, без цього нічого не обійтися.
    Багато людей роблять велику помилку "Я більше не хочу HTML-сайт, я хочу динамічний php-сайт", це велика помилка. HTML використовується майже скрізь, будь то мова про динамічні сайти чи статичні сайти.
    JS (Java Script) не збігається з JSP (Java Server Pages), яка залежить від сервера, сайти JS використовуються для певних сценаріїв, немає необхідності в будь-яких сценаріїв сервера JS може працювати в будь-якому браузері без необхідності серверний компонент, і в цьому підручнику, Ден використовував ряд сценаріїв JS (фото галерея), набивати пунктуальні мети використання JS, немає повних сайтів з JS замість є повними сайтів з використанням Java Server Pages тобто щось інше, хоча вони, здається, те ж саме.
    Я знаю, що ви давно почали вивчати "код", цей підручник - це чудова допомога, Ден зробив надзвичайну справу з цим підручником, ви навіть не розумієте, наскільки цінний цей підручник, під підручником у вас є майже всі теги ), що використовується в HTML, ви можете використовувати їх, тим більше, що кожен має опис.
    Не дозволяйте своєму ALEX, код переривання, він заснований.
    Повірте, вам не вистачає НЕ ДЛЯ ПОТЕНЦІАЛУ!

  • вау багато дуже добре структурованої інформації, щоб хтось міг зрозуміти. Я особисто переглянув підручник лише заради того, щоб дізнатися щось нове, і по мірі того, як підручник прогресував, я був вражений тим, як легко можна зробити сайт, не надто Навантажений і дуже приємний для перегляду. Вітаю за цей підручник, а також для всіх інших. Я з нетерпінням чекаю наступного "вливання" (слова Крісті) з інформацією.

  • Це буде підручник Dreamweaver? Dc не використовувати Dreamweaver або в підручники?

    Вітаємо всіх навчальних посібників ... ти найсильніший;)

  • Привіт .. навчальний посібник дійсно чудовий, є "тонни" інформації ... і я думаю, що мені довелося вивчити основні html на передній сторінці 98 ", роблячи десятки тестів, взятих із книг у бібліотеці, тому що у мене не було чистий на той час і тепер я можу дивитись підручник, в якому пояснюється все, що мені потрібно знати .. зрозуміло, що я розвинувся :))) .. Мені сподобалося те, що це було пояснено крок за кроком, і що вони були поставлені на сайті всі основні команди + приклад, над яким можна працювати .. зрозуміло, що ти знаєш, що робиш, ти справжні вчителі !!
    Проте, велика частина тих, хто працює в веб-дизайні з використанням програм, які автоматично роблять замовлення і моє запитання ви зробити підручник з такою програмою ??
    Я знаю, що ви створили цей підручник для розуміння команд і, таким чином, для кращого розуміння програм веб-дизайну ... але мені все одно цікаво побачити, що ви будете продовжувати з цією серією навчальних посібників, тому що на цю тему багато розмов, навіть якщо деякі вважають це нудно, коли справа доходить до навчальних посібників на кшталт тієї, яку зробив Дан, яку я з цим приводом вітаю за підручник ...

Схожі теми

Цей веб-сайт використовує файли cookie.