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
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!
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;)
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.
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 ...