На этом уроке мы познакомимся с новым способом создания объектов – с так называемыми телами вращения, начнем знакомство со стеком модификаторов объектов и новым видом объектов – сплайнами.
Итак, что такое тела вращения? Если верить википедии, то Тела вращения — объёмные тела, возникающие при вращении плоской фигуры, ограниченной кривой, вокруг оси, лежащей в той же плоскости. Т.е. как пример можно привести такие объекты как шар, конус, цилиндр и т.д. Все эти фигуры уже есть среди стандартных объектов, но к телам вращения так же относятся более сложные объекты такие как тарелки, бутылки, кружки, стаканы, рюмки и др. Вот как раз некоторые из этих объектов мы сегодня и сделаем. Начнем пожалуй с более легкой для моделирования бутылки.
Запускаем 3d Max, если он уже запущен то создаем новую сцену. Во вкладке «Create»
Выбираем пункт «Shapes»
В выпадающем списке выбираем «Splines»(Сплайны)
В рабочей области надо перейти в один из видов проекции, например в вид слева, там гораздо удобнее работать со сплайнами. Собственно что такое сплайн? У этого понятия есть довольно сложное для простого человека определение, но по простому это некоторая линия которая проходит через контрольные точки и плавно (или не совсем плавно) их огибает.
Продолжим. Выбираем объект «Line»
И пробуем изобразить бутылку в разрезе, причем не всю бутылку а только ее половину. Врятли это у вас это получится с первого раза, особенно без чертежа (про использование чертежей для моделирования поговорим в следующих уроках), поэтому набросайте примерный контур бутылки, который потом можно редактировать.
При создании можно регулировать плавность линии, так если нажать левую кнопку мыши (поставить контрольную точку) и тут же ее отпустить то получится ломаная линия:
Если поставить точку (нажав левую кнопку мыши), и не отпустить кнопку мыши то таская курсор по экрану можно регулировать плавность линии на участке от предыдущей точки до новой точки (на рисунке показан красной стрелкой):
После отпускания левой кнопки мыши регулируется плавность лини на участке от созданной точки до следующей точки (на рисунке показан красной стрелкой):
Для простоты при создании контура я использовал только ломаные линии. У меня получилось примерно так:
Обратите внимание что, это один сплайн, а не несколько различных сплайнов расположенных один за другим. Так же важным фактом является то, что сплайн имеет разрыв и это разрыв внизу, на дне бутылки.
Теперь придадим плавности нашему контуру, для этого выделим созданный контур (если выделение было снято) и перейдем на вкладку «Modify»
Здесь обратите внимание на вот такой список:
Выбирая отдельные пункты этого списка можно редактировать соответствующие части сплайна. Выбрав корень этого списка, т.е. надпись «Line» мы получим доступ целиком ко всему объекту, Выбрав «Vertex», можно будете редактировать вершины (контрольные точки) сплайна, т.е двигать их, менять их тип и т.д. «Segment» – отвечает за работу с сегментами сплайна (участками между вершинами) “Spline” – позволяет изменять целиком часть сплайна, не связанную с другой частью.
Эти же вкладки продублированы ниже в свитке «Selection»:
Нам нужно править вершины сплайна поэтому выделяем вкладку «Vertex», теперь с помощью инструмента «Select and Move»
можно перетащить каждую вершину в нужное место. Если нажать правую кнопку мышки на одной из вершин откроется контекстное меню где можно изменить тип вершины:
Доступны следующие типы:
Bezier Corner – вершина имеет независимые друг от друга плечи силы (желтые палочки), регулируя которые можно изменять участки сплайна до и после вершины:
Bezier – так же как и предыдущий тип имеет два плеча но зависимых друг от друга, так двигая одно плечо двигается и другое, так что вместе они образуют прямую:
Corner – простая ломаная вершина без плавного обвода:
Smooth – не регулируемый плавный обвод вершины:
Теперь двигая вершины, меняя их тип и настраивая плавность их обводки, попробуйте сделать контур бутылки более правильным и гладким. При этом возможно вам потребуется вставить лишнею вершину, там где требуется дополнительная детализация, для этого есть кнопка “Insert” в свитке “Geometry”:
Нажав на нее можно вставить вершину в нужном месте сплайна щелкнув левой клавишей мыши. Удаление лишних вершин производится нажатием кнопки “Delete” на клавиатуре или тоже кнопки “Delete” в свитке “Geometry”:
При удалении сплайн не разрывается.
Постарайся не увлекаться количеством вершин, чем меньшим количеством вы правильно опишите контуры бутылки, тем лучше. На последок следует упомянуть про то как выделить группу вершин, для этого можно выделять вершины зажав клавишу “Ctrl“ на клавиатуре, или обводя прямоугольной рамкой нужные вершины (зажав левую клавишу мыши). Можно комбинировать эти два способа, зажав “Ctrl“ обводить нужные вершины. Иногда таким способом можно выделить не нужные вершины, снять с них выделение можно щелкая по ним левой кнопкой мыши предварительно зажав кнопку “Alt” на клавиатуре.
Итак, подвигав вершины, регулируя плавность обвода, добавив в нужные места лишние вершины, у меня получился следующий контур:
Самое сложное место это наверно горлышко бутылки, поэтому привожу его отдельно:
Если будут возникать проблемы, возможно имеет смысл смотреть на настоящею бутылку ну или на картинку с бутылкой.
Теперь настало время завращать наш контур и получить бутылку, для этого найдите во вкладке Modify стек модификаторов (Modifier List):
Здесь содержится список возможных модификаторов (фильтров), которые можно применить к объекту, их там очень много, и если честно многие я вообще не знаю зачем нужны, но нас интересует модификатор «Lathe», он находится в разделе «OBJECT SPACE-MODIFIE»
Вот и получилась бутылка, только она может быть не много искажена:
Для этого надо выбрать направление оси вращения и ее размещение, делается это в свитке «Parameters», в разделах «Direction» и «Align»:
У меня это была ось вращения Y и кнопка «Min» в разделе «Align», у вас могут быть другие варианты, зависит от того в какой проекции вы делали контур, и как выглядит контур.
Так же после простановки нужных параметров бутылка может приобрести нужную форму, но выглядит черным пятном:
Это произошло из-за того что нормали полигонов бутылки развернуты во внутрь а не наружу, поэтому освещение рассчитывается не верно. Чтобы это исправить, надо поставить галку на «Flip Normals»:
Теперь мы наконец получили нормальную бутылку, только надо увеличить сегментацию чтобы сделать окружность более гладкой:
В результате получилась такая бутылка:
Ее прозрачностью займемся в следующих уроках, а пока можно назначить подходящий цвет:
Думаю, вы поняли как создавать объекты вращения, для закрепления попробуйте создать тарелку:
Здесь возможен вот такой недостаток в центре тарелки:
Это можно исправить, поставив галку на «Weld Core»:
Так же попробуйте сделать бокал:
Простейшие конструкции языка программирования. Циклы, ветвления, рекурсия.
Типы переменных в C#
Type
Represents
Range
Default Value
bool
Boolean value
True or False
False
byte
8-bit unsigned integer
0 to 255
0
char
16-bit Unicode character
U +0000 to U +ffff
‘\0’
decimal
128-bit precise decimal values with 28-29 significant digits
(-7.9 x 1028 to 7.9 x 1028) / 100 to 28
0.0M
double
64-bit double-precision floating point type
(+/-)5.0 x 10-324 to (+/-)1.7 x 10308
0.0D
float
32-bit single-precision floating point type
-3.4 x 1038 to + 3.4 x 1038
0.0F
int
32-bit signed integer type
-2,147,483,648 to 2,147,483,647
0
long
64-bit signed integer type
-9,223,372,036,854,775,808 to 9,223,372,036,854,775,807
0L
sbyte
8-bit signed integer type
-128 to 127
0
short
16-bit signed integer type
-32,768 to 32,767
0
uint
32-bit unsigned integer type
0 to 4,294,967,295
0
ulong
64-bit unsigned integer type
0 to 18,446,744,073,709,551,615
0
ushort
16-bit unsigned integer type
0 to 65,535
0
Простейшие операторы языка
*= += /= %=
== >= <= != !
& | << >>
Циклы
Циклом называется один или несколько операторов, повторяющихся заданное число раз или до тех пор, пока не будет выполнено определенное условие. Выбор типа цикла зависит от задачи программирования и личных предпочтений кодирования. Одним из основных отличий C# от других языков, таких как C++, является цикл foreach, разработанный для упрощения итерации по массиву или коллекции.
Циклы foreach, for, while, do while
В C# представлен новый способ создания циклов, который может быть неизвестен программистам на C++ и C: цикл foreach. Вместо просто создания переменной для индексирования массива или другой структуры данных, такой как коллекция, цикл foreach выполняет более тяжелую работу.
// Применение цикла для массива целых чисел.
int[] array1 = {0, 1, 2, 3, 4, 5};
foreach (int n in array1)
{
System.Console.WriteLine(n.ToString());
}
// Применение массива для строк
string[] array2 = {"hello", "world"};
foreach (string s in array2)
{
System.Console.WriteLine(s);
}
// Применение всех видов циклов для массивов.
int[] array1 = { 0, 1, 2, 3, 4, 5 };
foreach (int n in array1)
{
System.Console.WriteLine(n.ToString());
}
// Применение массива для строк
string[] array2 = { "hello", "world" };
foreach (string s in array2)
{
System.Console.WriteLine(s);
}
//------------------------------------------------------------------------
for (int i = 0; i < 6; i++)
{
System.Console.WriteLine(array1[i].ToString());
}
for (int i = 0; i < 2; i++)
{
System.Console.WriteLine(array2[i]);
}
//------------------------------------------------------------------------
int x = 0;
while (x < 6)
{
System.Console.WriteLine(array1[x].ToString());
x++;
}
int y = 0;
while (y < 2)
{
System.Console.WriteLine(array2[y]);
y++;
}
//------------------------------------------------------------------------
x = 0;
do{
System.Console.WriteLine(array1[x].ToString());
x++;
} while (x < 6);
y = 0;
do
{
System.Console.WriteLine(array2[y]);
y++;
} while (y < 2);
//------------------------------------------------------------------------
Ветвления программы.
If else
Оператор ifопределяет, какой блок операторов будет выполняться при выполнения условия, заданного выражением Boolean. В следующем примере переменной result типа Boolean присваивается значение true, а затем она проверяется оператором if.В результате получается The condition is true.
bool condition = true;
if (condition)
{
Console.WriteLine("The variable is set to true.");
}
else
{
Console.WriteLine("The variable is set to false.");
}
Оператор if в С# может иметь две формы представления, как показано на примере.
//----------------------------------------------------------------------------------------
// if-else statement
if (condition){
then-statement;
}
else
{
else-statement;
}
// Next statement in the program.
//----------------------------------------------------------------------------------------
// if statement without an else
if (condition){
then-statement;}
// Next statement in the program.
В инструкцию if-else, если condition имеет значение true, выполняется then-statement. Если condition имеет значение false, выполняется else-statement. Поскольку condition не может одновременно имеет значение true и false, значения then-statement и else-statement, операторов if-else, никогда не могут выполняться оба. После запуска then-statement или else-statement, элемент управления передаются в следующую инструкцию после оператора if.
В операторе if, не включающем оператор else, если condition имеет значение true, выполняется then-statement. Если condition имеет значение false, то управление передаются в следующую инструкцию после блока if.
then-statement и else-statement могут состоять из одного оператора или нескольких операторов, заключенных в фигурные скобки ({}). Для одного оператора в теле конструкции скобки необязательны, но рекомендуются.
Инструкция или инструкции в then-statement и else-statement могут быть любого типа, включая другой оператор if, вложенный в исходную инструкцию if. Во вложенных выписках if, каждое предложение else принадлежит к последнему if, не имеет соответствующий объект else.В следующем примере Result1 возникает, если m > 10 и n > 20 возвращается значение true.Если m > 10 имеет значение true, а значение n > 20 — Result2.
int m = 12;
int n = 18;
if (m > 10)
if (n > 20) {
Console.WriteLine("Result1");
}
else
{
Console.WriteLine("Result2");
}
// Try with m = 12 and then with m = 8.
if (m > 10)
{
if (n > 20)
Console.WriteLine("Result1");
}
else
{
Console.WriteLine("Result2");
}
Result2, если условие (m > 10) возвращает значение false.
В следующем примере, ввести символ с помощью клавиатуры и программе вложенных оператора if для определения символа ввода буквы.Если символ ввода буквы, проверки, программы символа ввода в нижнем регистре или прописными буквами.Сообщение отображается для каждого случая.
Console.Write("Enter a character: ");
char c = (char)Console.Read();
if (Char.IsLetter(c))
{
if (Char.IsLower(c))
{
Console.WriteLine("The character is lowercase.");
}
else
{
Console.WriteLine("The character is uppercase.");
}
}else
{
Console.WriteLine("The character isn't an alphabetic character.");
}
Также можно поместить выражение if в блок else, как это показано в части кода, приведённой ниже. В примере приведено помещение выражения if в два блока else и один блок then. Коментарии определяют какие условия выполняются в каждом из блоков.
// Change the values of these variables to test the results.bool Condition1 = true;
bool Condition2 = true;
bool Condition3 = true;
bool Condition4 = true;
if (Condition1){ // Condition1 is true.}
else if (Condition2){ // Condition1 is false and Condition2 is true.}
else if (Condition3){
if (Condition4) { // Condition1 and Condition2 are false. Condition3 and Condition4 are true. }
else { // Condition1, Condition2, and Condition4 are false. Condition3 is true. }
}else{ // Condition1, Condition2, and Condition3 are false.}
Так как выписка в другом блоке или тогдашнем блоке может быть любой допустимой выпиской можно использовать любое допустимое логическое выражение для условия.Можно использовать логические операторы, такие как &&, &, |||и !, чтобы сделать составные условия.В следующем коде приведены примеры.
// NOT
bool result = true;
if (!result){
Console.WriteLine("The condition is true (result is false).");}
else{ Console.WriteLine("The condition is false (result is true).");}
// Short-circuit AND
int m = 9;
int n = 7;
int p = 5;
if (m >= n && m >= p)
{ Console.WriteLine("Nothing is larger than m.");} // AND and NOTif (m >= n && !(p > m)){ Console.WriteLine("Nothing is larger than m.");}
// Short-circuit OR
if (m > n || m > p){ Console.WriteLine("m isn't the smallest.");}
// NOT and OR
m = 4;
if (!(m >= n || m >= p)){ Console.WriteLine("Now m is the smallest.");}
switch
Оператор switch — это оператор управления, выбирающий из списка возможных вариантов раздел переключения, для выполнения содержащегося в нём кода.
Оператор switch включает один или несколько разделов переключения. Каждый раздел переключения содержит одну или несколько меток case, за которыми следует один или несколько операторов. В следующем примере показан простой оператор switch с тремя разделами переключения. Каждый раздел switch содержит одну метку case, например case 1, и два оператора.
int caseSwitch = 1;
switch (caseSwitch){
case 1:
Console.WriteLine("Case 1");
break;
case 2:
Console.WriteLine("Case 2");
break;
default:
Console.WriteLine("Default case");
break;}
Операторы перехода.
continue
Оператор continue передает элемент управления следующей итерации вложенного пока(while), сделайте(do), для(for) или foreach, в котором она встречается.
В этом примере инициализируется счетчик для счета от 1 до 10. С помощью оператора continue в сочетании с выражением (i < 9), инструкции между оператором continue и концом тела цикла for пропускаются.
for (int i = 1; i <= 10; i++) {
if (i < 9)
{
continue;
}
Console.WriteLine(i);
}
break
Оператор break завершает ближайший внешний цикл или оператор switch, в котором он появляется.Управление передается оператору, следующему за завершенным оператором (если таковой имеется).
В этом примере условный оператор содержит счетчик, который должен считать от 1 до 100; однако оператор break завершает цикл после четырех.
for (int i = 1; i <= 100; i++) {
if (i == 5) break;
Console.WriteLine(i);
}
Функции
Функция — основная модульная единица в C#. Функция обычно предназначена для выполнения определенной задачи и её имя часто отражает эту задачу. Функция содержит объявления и выписки. В этом разделе описывается объявление, определение и вызов функций на языке С.
Функции должны иметь определение и должны быть объявлены, хотя определение может служить и объявлением, если объявление делается перед вызовом функции. Определение функции включает тело функции — код, который выполняется при вызове функции.
Объявление функции указывает имя, возвращаемый тип и атрибуты функции, определенной в любом другом месте программы. Объявление функции должно предшествовать вызову функции. Именно поэтому файлы заголовков, содержащие объявления для функций среды выполнения, включены в коде, прежде вызова функции среды выполнения. Если объявление содержит сведения о типах и количество параметров, то объявление является прототипом.
Компилятор использует прототип для сравнения типов аргументов в последующих вызовах функции с параметрами функции и чтобы преобразовать типы аргументов к типам параметров при необходимости.
В вызове функции управление выполнением передается из вызывающей функции в вызываемую функцию. Аргументы, если таковые имеются, передаются по значению в вызываемую функцию. Выполнение оператора return в вызываемой функции возвращает управление и, возможно, значение в вызывающую функцию.
Вернемся к старой задаче — выводе данных о людях. У нас есть разные люди с данными в виде отдельных фамилии, имени, отчества, которые надо вывести на экран — вида Пушкин Александр Сергеевич и Пушкин А.С. Чтобы задача была правдоподобней можно имитировать ввод данных пользователем или загрузку из внешнего источника, но все это будет пустой тратой времени — реальные приложения все равно работают с графическим и/или веб-интерфейсом. Просто держим в уме что в реальности людей не два, а две тысячи и заранее их имена не известны.
Два раза повторяется один и тот же кусок кода — склеивание трех строк в одну.
Два раза повторяется другой кусок кода — склеивание фамилии, первых букв имени и отчества, точек.
Логичнее всего вынести повторяющиеся куски кода в отдельное место, дать им имя и во всех остальных местах программы вызывать их по этому имени. Иными словами сделать функции — куски кода с собственными именем, которые принимают на вход какие-то данные, что-то с ними делают и возвращают обратно какие-то данные (хотя возможен вариант когда они ничего не принимают и не возвращают, просто что-то делают).
Слова public static отложим на пару минут в сторону, string означает, что функция вернет назад строку, CreateFio(string surname, string name, string otchestvo) — название функции и описание того, что она принимает на вход три строки.
Если бы функция ничего не принимала и ничего не возвращала, ее описание выглядело бы так
public static void CreateFio()
{
// фио мы здесь явно создать не сможем, вечная морока с этим тестовыми примерами
}
Код фцнкции обрамляется фигурными скобками, значение возвращается с помощью ключевого слова return
public static string CreateFioInitials(string surname, string name, string otchestvo)
{
string fio = surname + " " + name.Substring(0, 1) + ". " + otchestvo.Substring(0, 1) + ".";
//Временно оставим в стороне код "Substring(0, 1)" - он просто вырезает первый символ из строки.
return fio;
}
Рекурсия
Рекурсия, стек
В коде функции могут вызывать другие функции для выполнения подзадач.
Частный случай подвызова — когда функция вызывает сама себя. Это называется рекурсией.
Рекурсия используется для ситуаций, когда выполнение одной сложной задачи можно представить как некое действие в совокупности с решением той же задачи в более простом варианте.
Пример рекурсивного вызова функции
int sumTo(int n) {
if (n == 1) return 1;
return n + sumTo(n - 1);
}
8. Работа с массивами.
// Одномерный массив
int[] array1 = new int[5];
// Объявление создание и одновременная запись значений в массив.
int[] array2 = new int[] { 1, 3, 5, 7, 9 };
// Альтернативный вариант
int[] array3 = { 1, 2, 3, 4, 5, 6 };
// Двумерный массив
int[,] multiDimensionalArray1 = new int[2, 3];
// Объявление и запись двумерного массива.
int[,] multiDimensionalArray2 = { { 1, 2, 3 }, { 4, 5, 6 } };
// Массив массивов
int[][] jaggedArray = new int[6][];
// Задаем значения массива массивов.
jaggedArray[0] = new int[4] { 1, 2, 3, 4 };
Общие сведения о массивах
Массив имеет следующие свойства.
Массив может быть одномерным, многомерным или массивом массивов.
Количество измерений и длина каждого из измерений задаются, когда создается экземпляр массива.
Эти значения невозможно изменить во время существования экземпляра.
Значения по умолчанию числовых элементов массива задано равным нулю, а элементы ссылок имеют значение NULL.
Разреженный массив является массивом массивов и поэтому его элементы являются ссылочными типами и инициализируются значением null.
Индексация массивов начинается с нуля: массив с n элементами индексируется от 0 до n-1.
Элементы массива могут быть любых типов, включая тип массива.
Типы массива являются ссылочными типами, производными от абстрактного базового типа Array.Поскольку этот тип реализует IEnumerable и IEnumerable<T>, в C# во всех массивах можно использовать итерацию foreach.
Для генерации случайных чисел используем класс Random
Random rnd =newRandom();int month = rnd.Next(1,13);// creates a number between 1 and 12int dice = rnd.Next(1,7);// creates a number between 1 and 6int card = rnd.Next(52);// creates a number between 0 and 51
Задания
Создать массив из 10 чисел и вывести его в консоль с помощью цикла.
Создать массив из 10 произвольных чисел, найти максимальное и вывести в консоль.
Задать 4и произвольных числа и с помощью if найти максимальное количество повторений одного и того же числа.
Создать два массива и перемножить друг на друга i-ые значения если оба меньше пяти.
Вычислить сумму чисел до данного с помощью цикла и с помощью рекурсии.
Вычислить факториал с помощью цикла и с помощью рекурсии.
Числа Фибоначчи *. Создать функцию которая выводит в консоль десять чисел Фибоначчи с помощью цикла и с помощью рекурсии.
Создать двумерный массив 10×10 и заполнить его произвольными числами.
Осуществить сортировку массива.
Написать функцию добавления элементов в массив. Увеличивать размерность массива если в нем не хватает места.
*Последовательность чисел Фибоначчи имеет формулу Fn = Fn-1 + Fn-2. То есть, следующее число получается как сумма двух предыдущих.
Если вы прошли это курсы или не уверены в том нужны они вам или нет. Вы можете проверить уровень своей подготовки пройдя тестирование. Тест HTML CSS PHP.
JavaScript является самым популярным языком программирования в мире. В этом уроке вы увидите несколько несложных примеров о том что умеет делать JS.
Итак, что же наша программа делает, спросите вы? Все очень просто. Вкратце: по нажатию на кнопку Test на экране появится всплывающее окно с текстом «test».
По нажатию на кнопку Change или Magic на экране тоже появится всплывающее окно но с текстом «Hello, World!».
Но в чем разница? Разница в том, что в первом случае мы вызываем всплывающее окно напрямую в кнопке, а во втором и в третьем случае мы вызываем функцию написанную отдельно, которое собственно и вызывает всплывающее окно, но если к кнопке Magic мы обращаемся непосредственно из функции hello_world() ,то в кнопке Change мы вызываем функцию hello_world1() с помощью атрибута onClick.
Сайт (веб-сайт англ. website, от web — паутина, «веб» и site — «место») — это место во всемирной сети (интернете), которое имеет свой адрес, собственного хозяина и состоит из отдельных веб-страниц, которые мы видим как одно целое.
Глобальная сеть состоит из всех сайтов, доступных для общего пользования. Все странички каждого сайта объединяются одним корневым адресом — доменом (то, что мы набираем в адресной строке браузера), тематикой, системой и дизайном. Каждая страница веб-сайта это текстовый документ, который написан на языке программирования (HTML, XHTML, JAVA или другие). Эти текстовые файлы загружаются на ваш компьютер, обрабатываются браузером и отображаются на мониторе компьютера в виде страницы сайта. Язык программирования позволяет редактировать текст странички, добавлять ссылки, вставлять картинки, звуковые и видео файлы. Страницы сайтов могут быть как простыми наборами информации — тексты и картинки, так и сложными, с огромным количеством функций, которые управляются различными программами.
В разработке сайтов принимает участие большое количество людей — программисты, веб-дизайнеры и другие. Вначале веб-дизайнер создаёт дизайн будущего сайта, учитываются пожелания заказчика, цель сайта и его предполагаемая аудитория. Подбираются подходящие шрифты, картинки, расположение объектов. После наступает очередь работы верстальщика. Он работает с готовым дизайном, оптимизируя его под различные брузеры. Далее следует программирование. Программист создает структуру сайта с нуля, это делается с помощью языка программирования. Когда сайт готов, его нужно наполнить информацией. Также существуют различные люди, которые раскручивают, оптимизируют сайт, размещают его в интернет-каталогах, распространяют рекламу вашего сайта. В наше время сайт может являться визитной карточкой предприятия, фирмы, вашим портфолио. Также существуют Интернет-магазины, файлообменники, социальные сети(такие как vkontakte.ru, odnoklassniki.ru), онлайн-сервисы. С помощью сайта можно распространять информацию, быстро её корректировать, таким образом люди, посетившие ваш сайт будут обладать самыми последними данными. При помощи сайта вы имеете возможность донести огромное количество информации до людей. Никакой другой массмедиа не способен дать такого ошеломляющего эффекта.
Что такое хостинг и домен?
Каждый хотя бы немного знакомый с Интернетом человек слышал о таком понятии, как «хостинг сайтов», но далеко не каждый даже приблизительно знает, что это такое. Или, в чем отличия хостинга от домена.
Хостинг – это услуга по предоставлению дома для сайта. Это можно понять и чисто логически, ведь заходя на какой-нибудь сайт вы, как правило, видите там текстовые страницы, изображения, аудио или видеоинформацию – всё это файлы, особым образом представляемые вам в виде веб-страничек. А раз это файлы, значит — они имеют определённый объём и им нужно место для хранения. Само название произошло от английского «host» — основное устройство, главный сервер, узел (есть и альтернативное значение – держатель постоялого двора, именно оно даёт законное основание на сравнение с домом для сайта), а услуга по предоставлению места на «главном сервере» для сайтов назвали (по законам английской грамматики) «Hosting» или в русском варианте написания – хостингом.
Домен (доменное имя) — это адрес ресурса, который будут вводить пользователи при обращении к сайту. Адрес домена состоит из двух частей: доменов первого и второго уровня. По международному соглашению, каждой стране выделили доменное имя первого уровня, обозначающее принадлежность сайта к определённому государству: .kz, .ru, .by, .uk, .ua, .fr и т.д. Также существует несколько доменов первого порядка связанных с направлением деятельности сайта: .gov — государственные, .com — коммерческие, .edu — образовательные и прочие. Домен второго уровня представляет собой название сайта. Купить домен можно в уполномоченной организации, регистраторе доменов.
HTTP – это протокол передачи гипертекста. Он указывает программе, как следует принимать и передавать файлы. Есть разные протоколы: HTTPS –тот же, только более защищенный, POP3 и SMTP – почтовые протоколы, используются для отправки писем, FTP – протокол передачи файлов, при помощи его передаются файлы и т.д.
WWW — World Wide Web, переводится на русский язык как «Всемирная Паутина». Это специальная служба для работы в сети. На сегодня, указывать имя сайта можно и без WWW. Программа автоматически будет пользоваться этой службой.
Youtube – это доменное имя сайта – идет перед точкой после WWW. Оно может быть любым, каким вы его себе закажите.
COM – это доменная зона сайта, указывается она после точки в названии сайта. На сегодняшний день существует несколько десятков доменных зон!
Зона COM, и любая другая зона, является доменом первого уровня.
А вот metrika.yandex.ru – metrika является доменом третьего уровня или субдоменом.
Мало кто знает, но в начале своего существования, сайты в интернете не имели привычных нам имён, типа yandex.ru, google.com и так далее. Первоначально компьютеры в составе сети интернет имели лишь IP-адреса (четырёх разрядные группы чисел, типа 192.168.1.1). Однако, чем больше было компьютеров, тем сложнее становилось ориентироваться обычным людям в подобных цифровых обозначениях. И вот тогда пришла гениальная идея придумать систему доменных имён, которая бы упростила обращение к сайтам в глобальной сети. Теперь, для того, чтобы посетить сайт 172.217.22.14 вам можно набрать легко запоминающееся youtube.com
Что нужно учитывать при выборе имени домена
ЗАПОМИНАЕМОСТЬ.
НЕ ИСПОЛЬЗОВАТЬ БУКВЫ Ю(YU) Я(YA) Ж(ZH) У(U OO) Ш(SH)
НЕ БОЛЕЕ ДВУХ СЛОВ
ДЛИНА 5-12 СИМВОЛОВ
ИСПОЛЬЗОВАТЬ КЛЮЧЕВЫЕ СЛОВА
НЕ БОЛЕЕ ОДНОГО ДЕФИСА
УНИКАЛЬНОСТЬ ИМЕНИ (избегаем конкуренции)
Vk.com (Домен для раскрученного сайта)
Vkontakte.com (Хорошее имя домена)
V-kontakte.com (Допустимое имя домена) Yabloko-vkusnoye.com (Плохое имя)
Способы создания сайта
Существует несколько способов создания сайтов, популярные из которых:
Разработка с нуля (с помощью языков программирования)
CMS (Использование системы управления сайтом)
HTML5
Создание сайта с помощью языков программированияДля этого потребуются знания, в первую очередь язык гипертекстовой разметки HTML, а также CSS —каскадные таблицы стилей. С помощью HTML строится каркас будущего сайта, а через CSS настраивается его внешний вид.
Если же планируется динамический сайт, то потребуется проявить свои знания в использовании скриптового языка программирования PHP. Его еще иногда называют серверным языком, благодаря его способности тесно взаимодействовать с сервером. Ну и конечно же не повредит javascript, который внесет свою лепту в развитие сайта.
В данном способе разработки сайта потребуется лишь блокнот.
Использование системы управления сайтом
WordPress
Самый быстрый, а также широко используемый метод. На сегодняшний день широко используются такие системы («движки»), как WordPress, Joomla, Django, Drupal и прочие, которые идеально подойдут для сайтов либо блогов. Для форумов более подходящими станут: phpbb, ExBB, PunBB, SMF.
Использование движков (CMS) предоставляет доступ к множеству современных шаблонов и схем построения, а также значительно ускоряет и упрощает работу разработчика. Но для создания качестве нных и функциональных сайтов на базе CMS, потребуются базовые знания веб программирования. Будущий владелец сайта сам выбирает, какой из методов использовать.
Хороший сайт определяют следующие правила:
Разумное количество пунктов меню и ссылок.
Хороший баланс графики и текста
Простая навигация по сайту
Способность сайта продавать, получать новых клиентов или клики по рекламе.
Минимальное время загрузки.
Обновляемое содержание.
Присутствует возможность для пользователей взаимодействовать с сайтом.
Обратная связь от посетителей.
Для разработки сайтов потребуются следующие программы:
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированныйязык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML(или XHTML).
Из названия становится понятным его предназначение — указывать браузеру, как разместить элементы на странице при ее отображении на экране монитора. Что такое html элемент? Да все, что мы размещаем: текст, рисунки, анимации и т.д. С помощью HTML мы можем указать браузеру, где именно их разместить; какой текст сделать большим и жирным, а какой — маленьким курсивом; где начать новую строку, а где сделать переход на другую страницу. И многое другое.
Любой HTML документ заключается между тегами <HTML> и </HTML>.
Значения тегов разметки документа
Теги разметки — специальные команды для расположения на экране текста, графики, видео и аудио фрагментов, а также команды, служащие для связи с другими HTML-документами и ресурсами Интернет.
Теги составляют основу html. Между < и > находится имя тега и его параметры (если они есть). В основном все теги парные, т.е. один открывающий <>, а другой — закрывающий . Такая пара тегов называется контейнером. А все, что находится между ними — содержимым контейнера. Действия тегов распространяются только на их содержимое. Бывают также теги одиночные, т.е. не требующие закрытия. Такие теги просто совершают определенное действие, например, перевод строки или вставку рисунка.
Основные теги разметки
<HEAD> и </HEAD>. Между этими тегами располагается информация о документе.
<TITLE> и </TITLE>. В этих тегах заключается название странички, которое будет выведено в рамке окна программы просмотра.
<BODY> и </BODY>. «Тело» документа (текст, графика и т.д.) располагается между этими двумя тегами.
HTML атрибуты сообщают браузеру, каким образом должен отображаться тот или иной элемент страницы. Атрибуты позволяют сделать более разнообразными внешний вид информации, добавляемой с помощью одинаковых тегов.
Значение атрибута заключается в кавычки » «. Названия и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре.
Заголовок документа — тег HEAD и его элементы
Заголовок документа содержит служебную информацию и не влияет на внешний вид документа. Его задачей является предоставление браузеру пользователя или серверу информации о том, как отобразить ваш документ.
Единственным обязательным элементом заголовка документа являются теги <title></title>. Они необходимы, чтобы дать документу название, оно отражается в заголовке окна браузера. Например, если написать следующий код:
В окне браузера он будет выглядеть так:
В разделе head всегда пишите: <title>Название вашей страницы</title>. Обратите внимание, что title выводится в строке заголовка окна браузера.
Этот title очень важен, поскольку используется поисковыми машинами (такими, как Google) для индексирования вашего web-сайта и показа в результатах поиска.
Мета теги <Meta>
Мета теги являются важными составляющими HTML страницы. Размещаются они внутри тега <HEAD> и необходимы для указания параметров HTML страницы которые не будут видны обычному пользователю, но многое расскажут о вашей страничке поисковым системам и интернет браузеру. Рассмотрим основные теги.
Атрибут charset
Метатег с атрибутом charset указывает браузеру кодировку нашего файла. Так как общепринятой для русскоязычных сайтов является utf-8 и именно ее мы используем для создания наших сайтов наш мета тег должен выглядеть следующим образом: <meta charset=”utf-8”>
Свойство атрибутаkeywords
<metaname=”keywords”content=”Ключевые слова, HTML и его элементы” >
Мета теги имеют атрибут name. В зависимости от его значения браузер и поисковые системы поразному будут обрабатывать его содержание.
Мета тег с именем keywords указывает основные ключевые слова, которые описывают нашу страницу.
ПРИМЕЧАНИЕ:
Ключевое слово — слово в тексте, способное в совокупности с другими ключевыми словами представлять текст. В вебе используется главным образом для поиска. Набор ключевых слов документа называют поисковым образом документа. Ключевые слова должны содержать запросы, по которым вы бы хотели, чтобы ваш документ нашли в поисковой системе.
Свойство атрибута description
Данный тег используется при создании краткого описания страницы, используется поисковыми системами для индексации, а также при создании аннотации в выдаче по запросу. При отсутствии тега поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике.
<metaname=”description”content=”Основы HTML Kazakhstan Coding Academy”. 1 урок по HTML >
Свойства атрибута Author и Copyright
Эти теги, как правило, не используются одновременно. Функция тегов — идентификация автора или принадлежности документа. Тег Author содержит имя автора Интернет-страницы, в том случае, если сайт принадлежит какой-либо организации, целесообразнее использовать тег Copyright. Выглядит данный тег следующим образом:
<metaname=”author”content=”Джон Дое” >
Кроме этого, теги Author и Copyright могут содержать дополнительный атрибут «lang», позволяющий определить язык, использующийся при указании значения свойства
Теги заголовка h1 — h6 используются при создании HTML-страниц, причем, каждый из тегов указывают на сравнительную важность контента, расположенного после каждого из заголовков.
Тег h1 применяется для обозначения наиболее важных заголовков первого уровня, а применение тега h6, к примеру, указывает на заголовок шестого уровня, который является наименее значимым.
По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше.
Каждая страница должна содержать уникальный тег заголовка h1 с указанием основной темы, освещаемой на ней (целевой поисковый запрос), а также теги подзаголовков (подтем) статей, описывающих данную тему.
Результат:
Теги абзаца <p></p> и перевода строки <br>
Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
Результат
Все что мы видим в блокноте не всегда также отображается в браузере. Например: В блокноте видно три абзаца, а в результате браузер отобразил один сплошной текст.
Поэтому необходимо указать браузеру, сделать метку, что это три абзаца, применив парный тег <p></p>
Тег <br> — одинарный тег, устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой.
Другой такой тэг — <hr> — рисует горизонтальную линию («hr» от «horizontal rule»): будет выглядеть в браузере:
Элемент <pre> определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику.
Тег <strong></strong>
Устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.
Тег <i></i> или <em></em>
Таким же образом, как вы делали текст жирным шрифтом с помощью тэга <strong>, вы можете придать ему характер курсива/italic тэгом <i>. И конечно, «i» это сокращение от «italic».
Парные теги <ul>, <ol> и <li>.
Эти тэги используются для вывода списков.
<ul> — сокращение от «unordered list/неупорядоченный список» — вставляет значок кнопки для каждого элемента списка. <ol> — сокращение от «ordered list/упорядоченный список» — нумерует каждый элемент списка. Для создания элемента списка используйте тэг<li> («list item/элемент списка»).
Самостоятельная работа.
Необходимые программы для выполнения задания: notepad++ и браузер Сhrome
В меню кодировки выбрать «Преобразовать в UTF-8 без BOM» (Это основная кодировка для страниц на Русском языке). Ее мы будем использовать всегда для создания страниц.
Наберите в документе основную структуру html документа:
ПРИМЕЧАНИЕ: Текст в теге <Title> должен содержать от 10-70 символов. Текст должен содержать наиболее важные ключевые слова, которые описывают тематику вашего сайта. ОБЯЗАТЕЛЬНО: Каждая страница сайта должна содержать уникальное описание. Придерживаясь наших рекомендаций, вы получите максимальное количество посетителей сайта.
