Une série Web Tutoriel: la balise HTML Anchor, plus la résolution de problèmes, et en utilisant des outils de développement navigateur


Dans notre dernier tutoriel, un tutoriel Web Series: relations parents/enfants, des Images et le corps étiquettes supplémentaires, des commentaires, et résolution de problèmes

  • relations parent/enfant
  • commentaires
  • y compris les images dans nos pages Web avec des balises HTML.

Commentaires et relations parent/enfant peuvent être utiles pour le dépannage. Commentant sur les codes suspects et en utilisant une technique de «diviser pour régner» peut parfois aider à isoler un problème. Une bonne compréhension des relations parent/enfant et en regardant le profil de la structure du squelette de la page peut indiquer une étiquette à sa place.




Les images sont si important de divulguer une page Web. Les images peuvent être utilisés pour attirer l'attention des lecteurs.

En utilisant le langage des relations parent/enfant jette les bases pour la marque pages dynamiques ultérieures avec des outils tels que le JavaScript.


Notre nouvelle balise pour aujourd'hui: la balise d'ancrage HTML

Une balise d'ancrage en HTML crée un mécanisme par lequel vous pouvez cliquer sur un morceau de texte sur une page et de passer à un autre emplacement. Une balise d'ancrage est considéré comme un Hyperliens. La position "sauté" peut être:

  • un emplacement au sein de la même page Web (appelée section de la page)
  • une page dans le site Web
  • un emplacement externe sur le World Wide Web

Il est très courant d'avoir un lien vers un site externe. Ce est une excellente façon d'incorporer les informations fournies dans votre page web avec celui d'une autre page avec des informations plus détaillées sur certains sujets. Par exemple, vous êtes le propriétaire d'un magasin de fournitures de plomberie. Un fabricant de partie peut donner un lien vers leur site web, de sorte que plus et à jour des informations à leur site peut être ajouté à l'information générale contenue dans les pages web de votre site.

Cartes ancre dans votre site sont vraiment les outils de navigation. A partir de votre page d'accueil, vous pouvez obtenir différentes pages de votre site, comme une page de contact,

Un livre ou un manuel en ligne peuvent faire un large usage de cartes ancre. Le meilleur exemple serait d'utiliser les onglets d'ancrage dans un indice. Les cartes peuvent être réglés pour passer aux différents chapitres du document.


Toujours Tab mise en œuvre

Anchor onglet syntaxe pour le lien hypertexte est vraiment très simple, mais il ya quelques règles qui doivent être suivies. La syntaxe de base est:

du texte pour activer le lien


Plusieurs exemples simples de la connexion à un site externe pourrait être:

Le contenu affiché peut être encore plus précis que cela. Par exemple, si nous savions qu'il y avait une section appelée revenu pourrait aller sur le site www.xyz.com TAHT de section particulière dans la page en mettant un point d'ancrage comme suit:

Allez voir les résultats de revenus pour la société XYZ

Lien dans un site Web (en supposant que toutes les pages d'un même niveau de sous-répertoires serait très semblable:

Annuaire du personnel

et si la page staff.html avait sections par exemple l'administration, des finances et des bureaux de vente, et ces sections ont été marqué nous pourrions avoir quelque chose comme:

Annuaire du personnel - Administration par exemple.

Comment pouvons-nous créer ces sections?

Les sections sont vraiment signets.

Pour marquer une section en utilisant une planche de salut comme suit:

Annuaire du personnel - Administration et préciser au début des listes du personnel de l'administration de la page.

Choses à retenir sont le lien hypertexte utilise le href pour référencer la destination. La section a sauté à l'aide de la ça pour spécifier l'emplacement du signet.

Suggestions:

Soyez prudent lorsque vous nommez vos signets. Les noms de signet dans la même page ne peuvent pas avoir le même nom. Les noms doivent être uniques.

D'autres attributs peuvent être spécifiés, vous pouvez envisager pourrait être un attribut de style ou de tuiles. Ne pas trop car il peut confondre un utilisateur.

Comme les images antérieures mentionnés peuvent être utilisés à la place de texte dans le champ de texte.

Lorsque vous spécifiez un champ href sûr d'ajouter une barre oblique pour accéder sous-dossier, sinon deux demandes sont émises vers le serveur. Le premier ajoute la barre, une nouvelle demande est émise à votre nom.

Caractères vides ne sont pas autorisés dans les noms de champ id.


Des exemples simples de Tabs utilisation d'ancrage

Autres points à noter sur l'utilisation Anchor Tag

Il ya un certain nombre d'autres choses qui doivent être connu sur la balise d'ancrage.

Affichage hyperlien

Par défaut:

  • Un lien unvisited est surlignée en bleu
  • Un lien a été souligné en violet
  • Un lien actif est souligné en rouge

Qu'est-ce qu'un lien «active»?


Un lien vous devez ouvrir la fenêtre courante. Il est un attribut supplémentaire l'attribut cible qui indique où le lien doit être ouvert:

Les quatre options sont:

_blank - ouvrir le lien dans un nouvel onglet. Il ya des raisons pourquoi vous voudriez faire. Se il est probable que l'utilisateur souhaite avoir accès à des informations sur la fenêtre courante, tandis que le lien. Cela devrait être utilisé judicieusement.

_self - est le réglage par défaut, ouvrez le lien dans la fenêtre actuelle.

_parent - ouvrir le document dans la fenêtre principale.

_top - utiliser toute la largeur de la fenêtre

frameName - spécifie un onglet appelé.

Vous recherchez navigateur Outils de développement: Google Chrome

Dans ce tutoriel, nous allons voir les outils de développement de Google Chrome. D'abord, ouvrez le navigateur Google Chrome. Pour la dernière série d'outils Google fortement de télécharger la dernière version de Google Canaries. Pour nos besoins, actuellement, ce ne est pas nécessaire, mais il faut savoir que les navigateurs sont toujours mis à jour avec des correctifs et les nouvelles versions.

Pour accéder aux outils, ouvrez Google Chrome. Maintenant il ya deux façons d'obtenir les outils:

  • en haut à droite de l'écran est (ce que je appelle pile de crêpes), qui est ce que Google appelle officiellement le menu Chrome ou
  • cliquez sur le bouton droit de la souris et choisissez Sélectionner inspecter élément

Dans les deux cas, il est présent à l'écran, comme indiqué dans les clichés qui suivent cette section.

Pour ce tutoriel nous venons de se familiariser avec la barre d'outils. Les options sont:

Elements - montre l'arbre entier, le DOM, Document Object Model, associé à la page

Ressources - regardons les ressources chargées

Réseau - informations sur les ressources a demandé et téléchargé

Sources - identifier les sources de l'application en cours

Chronologie -Procure informations sur où le temps est passé dans le chargement et avec des pages

Profils - fournit des informations sur le temps écoulé temps d'exécution et utilisation de la mémoire. Vous pouvez commencer un profil pour l'application

Stockage - idées d'utilisation de stockage

Audit - peut aider à identifier les domaines d'amélioration de la page du temps de téléchargement

Console - la console sert à deux fins: la journalisation des diagnostics et une coque d'interagir avec le document.

Une grande partie de cela devient important plus tard que vous développez des applications qui peuvent être accessibles par une large communauté. Une suggestion, cependant, serait prendre une page Web que vous pourriez travaille actuellement et familier en seulement inspecter le code ainsi que regarder les choses comme les noms de chemin des fichiers pour la précision. De cette façon, quand vous pouvez avoir besoin pour déboguer JavaScript, par exemple, il ya au moins quelque peu familiers de l'endroit où vous trouverez quelques options. Le contrôle des sources est un excellent moyen de vérifier les informations que vous pensiez charge est vraiment ce qui est en cours d'exécution. l'exécution de code de vérification est en partie un moyen de résolution de problèmes

Deux façons d'obtenir de Google Chrome Developer Tools

Apprise nous de la pertinence de ce tutoriel pour Elle

Évaluez-moi! 1 2 3 4 5 Votre note pour ce tutoriel informations?

(0)
(0)

Commentaires - 0

Sans commentaires

Ajouter un commentaire

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Caractères restants: 3000
captcha