Chapter 3.7: Contact you
There are many different ways to share with people your contact information on the internet. You can simply write it in a paragraph element. You can use abbreviation elements so when they scroll over the word "Email" it shows your email. And then there is the simple way to do it, the <address> tag. This tag is used for defining the contact information for the owner of this website or the business in general, it is used for defining your email address, mail box, phone number, and etc. Now real quick let's also introduce another attribute called the "Anchor" attribute, or <a> this means that its an absolute spot. Now the <href> element means "Hyper Reference" which refers to directing you to a location from your current one and where to find it. Right now we will use both those elements to define an email address. Now let's get started, first we put in the address element:
<address>
</address>
Now we put some text where the contact information will go.
<address>
<p></p>
</address>
And now we will put an email address, phone number, and an actual address.
<address>
<p>[email protected]<br>1-234-567-8910<br>12345 Water Lake Rd</p>
</address>
Alright, so now that they have our email they can copy and paste it into their email service and send you a message right? Well let's make it even simpler for them, and make so when they click the email address, that is auto-fills things out for them. We are going to do this using the <a>, <href> tags and a new one called mailto
Now when defining an href you put it in quotes like this: <a href="http://www.mywebsite.org/">. Well now we add the paragraph element before it and put the text we want clicked after the the href tag. Then exit the <a> tag and continue the text with whatever. So it would work like this:
<p>My website is <a href="http://www.mywebsite.org/">Here</a> so feel free to click that link there</p>
will create a hyper link to "mywebsite.org" and it will look like this:
<address>
</address>
Now we put some text where the contact information will go.
<address>
<p></p>
</address>
And now we will put an email address, phone number, and an actual address.
<address>
<p>[email protected]<br>1-234-567-8910<br>12345 Water Lake Rd</p>
</address>
Alright, so now that they have our email they can copy and paste it into their email service and send you a message right? Well let's make it even simpler for them, and make so when they click the email address, that is auto-fills things out for them. We are going to do this using the <a>, <href> tags and a new one called mailto
Now when defining an href you put it in quotes like this: <a href="http://www.mywebsite.org/">. Well now we add the paragraph element before it and put the text we want clicked after the the href tag. Then exit the <a> tag and continue the text with whatever. So it would work like this:
<p>My website is <a href="http://www.mywebsite.org/">Here</a> so feel free to click that link there</p>
will create a hyper link to "mywebsite.org" and it will look like this:
My website is Here so feel free to click that link there
By default that will show up a different color, but since my website is defined with CSS it shows up a Teal-ish blue. We will discuss CSS later.
Now back to that email address, it is basically the same concept, only before the email address you put mailto: and then end it after. Then define the rest of your contact information Like this:
<p><a href="mailto:[email protected]">[email protected]<a><br>1-234-567-8910<br>12345 Water Lake Rd</p>
then define it as an address zone
<address>
<p><a href="mailto:[email protected]">[email protected]</a><br>1-234-567-8910<br>12345 Water Lake Rd</p>
</address>
this will then create an automated mail system with contact info, and will be displayed as:
Now back to that email address, it is basically the same concept, only before the email address you put mailto: and then end it after. Then define the rest of your contact information Like this:
<p><a href="mailto:[email protected]">[email protected]<a><br>1-234-567-8910<br>12345 Water Lake Rd</p>
then define it as an address zone
<address>
<p><a href="mailto:[email protected]">[email protected]</a><br>1-234-567-8910<br>12345 Water Lake Rd</p>
</address>
this will then create an automated mail system with contact info, and will be displayed as:
[email protected]
1-234-567-8910
12345 Water Lake Rd