Comment créer un site Web, partie 2, site entièrement réalisé à partir de 0 en HTML, CSS avec galerie d'images - tutoriel vidéo

Ce tutoriel décrit un site en HTML et CSS, couvrant toutes les étapes: la création du site,
la création d'un compte sur un hébergement gratuit et enfin le téléchargement de fichiers que notre hébergement de sites Web, hébergement gratuit est un moyen rapide de mettre quelques minutes dans notre site Web, l'inconvénient de cette méthode est que nous aurons des annonces affichées tout au long de l' dans le top (sommet de la tête).

Toute personne qui veut ouvrir un site web, besoin de connaître le langage HTML et CSS, il n'est pas nécessaire d'être un expert en HTML (HYper Tposte MArkupe Language), mais certaines informations de code sont absolument essentielles pour comprendre comment ces choses fonctionnent.

Même si vous construisez un site, tout ce que vous devez savoir ce qui se passe dans ces fichiers, vous aurez besoin de correction périodique des erreurs et des changements atteindre.

Beaucoup de gens fuient le code, beaucoup assimilent le code à des hiéroglyphes, ce n'est pas du tout comme ça, quelqu'un a dit un jour: "CODE IS POETRY", il avait raison, quand on voit que quelque chose est né d'une série de lignes de code, on se sent merveilleux, on construit un monde virtuel avec clavier et souris uniquement.

Nous utilisons des applications construites par des éditeurs de logiciels depuis longtemps, nous n'avons fait que des opérations informatiques, il est temps de faire de la programmation, en fait ce n'est pas un langage de programmation, c'est un "langage de balisage", mais nous nous référerons à c'est comme un langage de programmation, parce que ça sonne assez bizarre "langage de balisage", HTML est l'un des langages de programmation (balisage) les plus faciles à utiliser de nos jours, on voit du HTML sur n'importe quel site, de nombreux logiciels l'ont en les composants du HTML, ce langage de programmation est partout, il est temps de l'apprendre.

La première fois peut être un peu intimidant, mais si vous êtes moins attentif, vous comprendrez immédiatement que tout est-il si difficile, les choses sont simples et belles, nous créons quelque chose avec nos mains, c'est la chose la plus importante.

Nous allons vous apprendre les bases, nous allons apprendre à insérer du texte dans une page web, alors nous arrangerons et la couleur du texte, nous utilisons une page de style CSS (feuilles de style) avec qui nous allons placer tous les éléments de la page HTML à tous, afin que vous placerez sur notre page pour regarder comme elle est faite d'une seule pièce.

Vous apprendrez des techniques simples de base HTML et CSS, mais ce sont des choses de base en HTML et CSS, de créer un bel aperçu.

Pour ce tutoriel, vous devriez soigneusement s'armer de patience, ce tutoriel est celui que nous pouvons nous permettre de mener à petit, si rembobiner quelques secondes, vous risquez de manquer quelque chose de très important et vous verrez après que ne prendrait pas effet, la concentration L'information est extrêmement élevé et c'est pourquoi je vous demande d'être très, très prudent.

Après ce tutoriel, je dirais même cours intensif, vous aurez une meilleure idée de ce que HTML et CSS, vous pouvez contrôler le code et vous comprenez parfaitement un document HTML HTML sentiment qui n'est pas seulement une ligne de heroglife dissipera, vous savez ce que c'est quand vous regardez un document ou d'un CSS HTML.

Nous nous renseignons sur les tags (étiquettes), nous avons ici quelques exemples de tags (étiquettes) que vous pouvez utiliser dans un document HTML, ne vous inquiétez pas, pas besoin de les stocker tous, juste besoin d'apprendre les bases de la première table le reste peut être trouvé ici sur le site ou sur Internet lorsque vous en avez besoin.

Même les tables sont ordonnées ces balises, sont effectuées à l'aide HTML.

Les éléments de base (tags).

Définir un format de fichier Web
Tête de documents
Document Tilul
Le corps de la page HTML
BGCOLOR = Culoare La couleur de fond de la page
TEXT =Culoare page de texte de couleur
= LINKCuloare Unvisited lien couleur de la page
Vlink =Culoare Couleur des liens visités de la page
ALINK =Culoare La référence couleur pendant le clic utilisateur exacutat
Background = url L'image de fond pour la page
Paragraphe
<Hn> <Hn> Niveau sous-titre du document (n = 1-6)
Indique les attributs du texte encadrées
SIZE =n La taille du texte est 1-7
Face ="Un B" Indique la police: aSi elle est disponible, ou b
COLOR =s Couleur du texte: soit un nom de couleur ou valeur RGB
Newline
Informations préformaté
HTML Comenatriu
Matériau traverse la page
Règle horizontale
SIZE =x hauteur de la règle en pixels
WIDTH =x largeur de la règle en pixels ou en pourcentage
NOSHADE Désactiver l'ombre affichage règle horizontale
ALIGN =x Alignez règle horizontale sur la page (gauche, centre, droite)
COLOR =x La couleur de la règle horizontale (IE uniquement)
Marque Anchor
HREF =url Hypertext référence
HREF =# Nom La référence à une ancre interne
Name =nom Définition des ancres internes

listes Elements .

Description définition
définition du type de liste
Définition terme
Liste des fonctionnalités
<OL Liste ordonnée (numérotée)
TYPE =pointe Tapez numérotation. Valeurs possibles: A, A, I, I, 1
START =x Numéro de départ de la liste ordonnée
<UL Liste non ordonnée (s)
TYPE =forme La forme du marquage. Les valeurs possibles: cercle, carré, disque.

éléments de mise en forme des caractères .

Coller le texte en gras
Coller le texte en italique
Collez le texte en surbrillance
La police du texte Minivan
Citer bibliogarfica
Annonce du programme
mise en évidence de style logiques
Texte à partir du clavier
Mettez en surbrillance logique puissante
Programme ou variable
<BASEFONT SIZE = n> Indique la taille de police par défaut de la page

Éléments pour cadres .

Définir la page d'écriture
Cols =x Le nombre et la taille relative des colonnes
Rows =x Le nombre et la taille relative des lignes
BORDER =x Spécifie l'état «on» ou «off» pour le cadre FRAMESET (1 ou 0)
FRAMEBORDER = x Indique la taille du cadre
Framespacing = x La quantité d'espace entre deux cadres adjacents
La définition d'un certain cadre
SRC =url cadre de la source de l'URL
Name =nom Nom du cadre (utilisé en conjonction avec TARGET = nom dans le cadre de la marque d'ancrage
Scrolling =SCRL Définir les options possibles barre de derulare.Valori: on (activé), off (désactivé), Auto (automatique)
FRAMEBORDER =x Bordure autour de la taille de l'image
Marginheight =x L'espace extra-dessus et au-dessous d'un certain cadre
Marginwidth =x L'espace de l'unité supplémentaire à droite et à gauche d'une trame donnée
Section page affichée pour les utilisateurs qui ne peuvent pas voir le cadre
Armature interne (pour (IE)
SRC =url cadre Source
Name =s fenêtre Nom (utile pour TARGET)
HEIGHT =x Hauteur embarqué
WIDTH =x Largeur du cadre intégré

Articles pour les tables .

Le tableau HTML
BORDER =x table Box
Cellpadding =x Un espace supplémentaire dans les cellules d'un tableau
Cellspacing =x L'espace supplémentaire entre les cellules du tableau
WIDTH =x Largeur tableau imposé
FRAME =valeur Réglage fin de tableau
RÈGLES =valeur Le réglage fin des règles de la table
BorderColor = Culoare Indique la table de la couleur de la bordure
BORDERCOLORLIGHT = Culoare La couleur claire des deux couleurs spécifiées
BorderColorDark = Culoare La couleur sombre des deux couleurs spécifiées
ALIGN =à gauche Aligner la table à la gauche de la page et le texte passe à droite
ALIGN =bon Aligner la table sur le côté droit de la page, et le texte passe à gauche
Hspace =x Espace horizontal de l'unité supplémentaire autour de la table
Vspace =x Espace vertical de l'unité supplémentaire autour de la table
Cols =x Indique le nombre de colonnes d'une table
Définit un ensemble de définitions de colonne à l'aide du balisage
<COL WIDTH =x> Définir une largeur de colonne en pixels
Définit le titre du tableau
Définit le corps de table
tableau de ligne
BGCOLOR =Culoare Indique la couleur de fond pour toute la ligne
ALIGN =alignement Aligner les cellules de la ligne actuelle (gauche, centre, droite)
La cellule de données de la table
BGCOLOR =Culoare Indique la couleur de fond pour les données de la cellule
Colspan =x Nombre de colonnes qui s'étend sur les données de la cellule de courant
Rowspan =x Nombre de lignes de données s'étendant sur la cellule en cours
ALIGN =alignement Alignement du tissu de la cellule de date.Valori possible (gauche, droite, centre)
Valign =alignement L'alignement vertical du date.Valori de matériel cellulaire possible: (en haut, en bas, au milieu)
Background =url Spécifiez l'image de fond pour la cellule de table
NoWrap Ne laissez pas les lignes de séparation de texte dans une cellule
ALIGN =de base Aligner les cellules avec des données de référence au texte adjacent
ALIGN =caractère Aligne une colonne sur un caractère spécifique (le caractère par défaut est ".")
ALIGN =justifier Alignez le bord du bord à gauche et à droite du texte

Ajouter des éléments de l'image.

<IMG Marquage des images d'entrée
SRC =url Le fichier graphique source
ALT =texte Texte alternatif à afficher si nécessaire
ALIGN =alignement l'alignement de l'image dans la page. Valeurs possibles: top (haut), moyennes (au milieu), bas (en bas), à gauche (à gauche), right (droite)
HEIGHT =x Hauteur de l'image (en pixels)
WIDTH =x Largeur de l'image
BORDER =x Le cadre autour de l'image quand elle est utilisée en tant que lien hypertexte
Hspace =x Espace horizontal supplémentaire autour de l'image (en pixels)
Vspace =x Espace vertical supplémentaire autour de l'image (en pixels)

formes d'éléments.

Formulaire HTML actif
ACTION =url Programme CGI sur le serveur qui reçoit les données
METHOD =méthode Comment les données sont soumises au serveur (GET ou POST)
<ENTRÉE Champ de texte ou autre entrée
TYPE =choix Type de champ de saisie . Valeurs possibles: texte, mot de passe, case à cocher, masqué, fichier,
radio, présenter, réinitialiser image.
Name =nom Le nom symbolique du champ de valeur
VALUE =valeur contenu par défaut du champ de texte
Checked = choix Bouton / boîte marquée par défaut
SIZE =x Nombre de caractères dans un champ de texte
SIZE =x Le nombre maximum de caractères autorisés
Cases à cocher Groupe
Name =nom Le nom symbolique du champ de valeur
SIZE =x Le nombre d'éléments de menu qui s'affichent une fois (par défaut = 1)
MULTIPLE =x Permet la sélection de plusieurs éléments de menu
<OPTION Choix particulier dans un domaine
VALUE =valeur La valeur résultant des sélections sur le menu
Texte du camp de renfort sur plusieurs lignes
Name =nom Le nom symbolique du champ de valeur
Rows =x Nombre de lignes dans la zone de texte
Cols =x Nombre de colonnes (caractères) par ligne de zone de texte
Partager forme en parties logiques
Nom associé un ensemble de champs (fieldset)
ALIGN =s Spécifie l'alignement de la légende (explication) affiché (haut, bas, gauche, droite)
Tabindex =x Indique l'ordre des éléments lorsque l'utilisateur appuie sur la touche Tab
ACCESKEY =c Indique que prévoit touche de raccourci sur le clavier d'un élément particulier
HANDICAPÉS Element est inactif, mais est affiché à l'écran
Readonly L'article est affiché sur l'écran, mais ne peut être modifié

Éléments avancés.

Des informations spécifiques sur les modèles modèles
TYPE =vague Le type de modèle de style. Généralement "text / css"
Comprend généralement un script Javascript dans page web
LANGUAGE =langue Le langage utilisé
EVENT =événement Événement qui déclenche l'exécution de scripts spécifiques
D'=numeobiect Nom de l'objet de la page sur laquelle le script fonctionne

Télécharger les tableaux balises HTML

Si vous voulez vérifier faite dans le tutoriel, vous pouvez accéder à cette adresse: http://www.videotutorial.150m.com.

Nous vous conseillons de le décompresser le fichier joint et d'étudier les trois fichiers HTML ou fichiers CSS à l'aide de Notepad + + ou un autre programme pour éditer des pages Web de cette façon vous pouvez faire des changements cau peut même prendre des notes pendant qu'il vous apprendrez html sans votre compte.

Je vous souhaite une agréable et vous accueillir dans les didacticiels suivants de cette série et au-delà.

TÉLÉCHARGEMENT DE FICHIERS D'ESSAI

menée par Dan Constantin
tutorialegimp.blogspot.com
Cristian Cismaru: J'aime tout ce qui touche à l'IT&C, j'aime partager l'expérience et les informations que j'accumule chaque jour. J'apprends à vous apprendre!

Voir les commentaires (333)

  • Très agréable, des tonnes d'informations dans ce tutoriel.
    Ce tutoriel peut être appelé: infusion HTML et CSS.
    Peut-être que vous n'avez pas à apprendre en quelques mois, vous pouvez apprendre ici dans une heure ou deux, j'ai vu tout cela avant d'être posté et je peux dire que m'a impressionné informations de citation peut s'intégrer dans un tutoriel.
    A un moment, j'ai ressenti le besoin de boire de l'eau, même si je viens de regarder le tutoriel, et je n'ai pas envie de penser, citation Dan bu de l'eau par la suite.
    Il ya quelque chose de ne pas apprendre le langage HTML et / ou CSS après ce tutoriel.

  • Aoleu, ce que j'essaye d'apprendre depuis environ 3 mois, apparemment je n'ai pas le temps ...
    Merci beaucoup, je regarde attentivement!

  • Cristi-adminTrès agréable, des tonnes d'informations dans ce tutoriel.
    Ce tutoriel peut être appelé: infusion HTML et CSS.
    Peut-être que vous n'avez pas à apprendre en quelques mois, vous pouvez apprendre ici dans une heure ou deux, j'ai vu tout cela avant d'être posté et je peux dire que m'a impressionné informations de citation peut s'intégrer dans un tutoriel.
    A un moment, j'ai ressenti le besoin de boire de l'eau, même si je viens de regarder le tutoriel, et je n'ai pas envie de penser, citation Dan bu de l'eau par la suite.
    Il ya quelque chose de ne pas apprendre le langage HTML et / ou CSS après ce tutoriel.

    oui tu as raison cristi mais je suis déçu car je pensais que tu ferais le tuto: (mais quand même bravo dan tres bon tuto

    • Ce n'est pas gentil ce que vous avez dit et je vous le dis honnêtement, cet homme a lutté pendant environ une heure et demie pour vous apprendre à créer un site à partir de zéro et vous dites que vous êtes déçu parce qu'il ne l'a pas fait? Imaginez combien de travail l'homme a mis et combien de temps il a perdu pour nous enseigner les bases du html et du css, pensez avant d'ouvrir la bouche que cela ne vous conviendrait pas de soumettre du travail, puis de vous laisser d'autres commentaires inutiles tels que vous êtes déçu qu'il ne l'ait pas mis, quelqu'un d'autre a créé ce tutoriel, merci d'avoir où apprendre;)

  • bec:
    oui vous avez raison, mais je suis déçu parce que Cristi pense que vous allez faire tutorialu mais de toute façon très bon dan bravo tutorialu

    Que pensez-vous, que la série sur "Comment faire un site" est terminée.
    Dans le prochain tutoriel, je vais être moi.
    Parce que ce que le prochain tutoriel, je vais avoir besoin d'être regardé ce tutoriel réalisé par Dan.
    Ce que je présente est différente de ce tutoriel, j'ai réalisé aza Dan, mais les informations qu'il sera essentiel pour la bonne compréhension des choses.
    Il ya plusieurs façons de publier du contenu sur le web, mais ils ont tous un dénominateur commun, HTML et CSS, sans eux, vous ne pouvez rien faire.

  • Cristi-admin:
    Que pensez-vous qu'il a terminé la série sur «Comment faire un site web."
    Dans le prochain tutoriel, je vais être moi.
    Parce que ce que le prochain tutoriel, je vais avoir besoin d'être regardé ce tutoriel réalisé par Dan.
    Ce que je présente est différente de ce tutoriel, j'ai réalisé aza Dan, mais les informations qu'il sera essentiel pour la bonne compréhension des choses.
    Il ya plusieurs façons de publier du contenu sur le web, mais ils ont tous un dénominateur commun, HTML et CSS, sans eux, vous ne pouvez rien faire.

    Salut Cristi, je blâme une série de php ou js?

  • Alex:
    Salut Cristi, je blâme une série de php ou js?

    Nous parlons de tout, mais aussi PHP et le site JS Lié au format HTML sans HTML peut pas.
    PHP est utilisé plus pour extraire des données de bases de données, tous les sites web HTML sont, que ce soit des sites Web dynamiques (PHP, DHTML, ASP, JSP, cf) que ce soit un site statique, nous utiliser HTML, non, il ne peut rien faire.
    Beaucoup de gens font une grosse erreur "Je ne veux plus de site HTML, je veux un site php dynamique", c'est une grosse erreur, le HTML est utilisé un peu partout, qu'il s'agisse de sites dynamiques ou de sites statiques.
    JS (java script) n'est pas la même chose avec JSP (Java Server Pages) qui dépend d'un serveur, les sites JS sont utilisés pour certains scripts, pas besoin de n'importe quel serveur, les scripts JS peuvent s'exécuter dans n'importe quel navigateur sans avoir besoin composant serveur, et dans ce tutoriel, Dan a utilisé une série de scripts JS (galerie de photos) pour des trucs hors utilise JS, il ya des sites entiers avec JS à la place sont des sites complets utilisant Java Server Pages qui est autre chose, même si elles semblent même.
    Je sais que vous avez commencé à étudier le "code" il y a longtemps, ce tutoriel est une excellente aide, Dan a fait une chose extraordinaire avec ce tutoriel, vous ne réalisez même pas à quel point ce tutoriel est précieux, sous le tutoriel vous avez presque toutes les balises ) utilisés en HTML, vous pouvez les utiliser, d'autant plus que chacun a une description.
    Ne laissez pas votre ALEX, casser le code, il est basé.
    Croyez-moi, vous oubliez potentiel NON!

  • wow beaucoup d'informations très bien structurées pour que tout le monde puisse comprendre. J'ai personnellement regardé le didacticiel juste pour découvrir quelque chose de nouveau, et au fur et à mesure que le didacticiel progressait, j'ai été étonné de voir à quel point un site peut être facile à créer, pas trop chargé et très agréable à regarder. Félicitations pour ce tutoriel mais aussi pour tous les autres. J'attends avec impatience la prochaine "infusion" (les mots de cristi) avec des informations.

  • Toutes nos félicitations!! Très beau tutoriel, ce sera une Roumanie pleine de concepteurs Web :) (espérons-le !!)

  • quand il s'agit d'un tutoriel Dreamweaver? Ou ne pas utiliser dreamweaver ms dans vos tutoriels?

    Félicitations pour tous les tutoriels ... vous êtes le plus fort;)

  • Salut .. le tutoriel est vraiment super, il y a des "tonnes" d'informations..et moi qui pense que j'ai dû apprendre le html de base en page 98 'en faisant des dizaines de tests tirés de livres dans la bibliothèque parce que je n'avais pas net à ce moment-là et maintenant je peux regarder un tutoriel qui explique tout ce que j'ai besoin de savoir .. il est clair que j'ai évolué :))) .. j'ai aimé le fait que cela ait été expliqué pas à pas et qu'ils aient été mis sur le site toutes les commandes de base + un exemple sur lequel on peut travailler..il est clair que vous savez ce que vous faites vous êtes de vrais professeurs !!
    Mais la majorité de ceux qui travaillent dans la conception web en utilisant des programmes qui font automatiquement des ordres et ma question est la volonté de faire un tutorial d'un tel programme?
    Je sais que vous avez réalisé ce tutoriel pour comprendre les commandes et donc une meilleure compréhension des programmes de conception web ... mais je suis toujours curieux de voir ce que vous allez continuer avec cette série de tutoriels car il y a beaucoup de discussions sur ce sujet même si certains le considèrent ennuyeux quand il s'agit de tutoriels comme celui réalisé par Dan, que je félicite à cette occasion pour le tutoriel ...

Article similaire

Ce site utilise des cookies.