Tyran Lovett @tyranlovett12 - Tumblr Blog

Found this to refer back to. Credit https://earlgreycreative.com/

ORGANISE YOUR WEBSITE!!!!

Hurray, we are nearly coming to an end of learning the basics of html.CSS is next week I think. These lectures have really built my confidence in the website development and have helped fully understand the do’s and don’ts of Html5. This week we were thought more about structuring our website and sectioning.In my undergrad module I heavenly used <div> to organise my website. To my surprise during this lecture we were told not to use it as often. We were advised to use semantic html such as <section> rather than <div>. <div> can be used for styling but to be used sparingly.

<article> element is also used for sections of a website such as blogs, forums etc.

Additionally in this lecture we learned the importance of <aside>. This code is useful in organising different groups of navigation content i.e special offers.

<footer> for things such as copyright at the bottom of the webpage was also brought up . Along with how <body> code can also be used as a wrapper.

These ideas were practiced in the lab during a tutorial exercise. This is my (bad) attempt.

<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'/> <TITLE>Semantic html</TITLE> </head> <body>

<header> <h1> Interneting Is Easy! </h1> <nav> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Blog</a></li> <li><a href='#'>Sign Up</a></li> </ul> </nav> </header>

<article> <header> <h1> Semantic HTML </H1> <p> By Tory McClure. PUBLISHED January 3rd </p> </header>

<p>This is an Example webpage explaining HTML5 semantic markup.</p> <section> <h2> The Document Outline </h2> <p> The <code><header></code> element is one such sectioning element. </p>

<h3> Footers</h3> <p> and so is the <code><footer></code> element.</p> </section>

<section> <h6>Inline Semantic HTML.</h6> <p> The <code><header></code> element is semantic ,but its not sectioning content </p>

</section> <footer> <p>This fake article was written by somebody at Internetingishard.com, which is a pretty decent place to learn how to become a web developer.</p> </footer> </article> <footer> <p>© 2017 Internetingishard.com </p> </footer> <section>

</body> </html>

#atom sectioning html

Very Interesting

image image image

As someone who mainly focuses on the visuals of something, this week we were introduced to my favourite aspect of webpages ,images.

Adding images and links to a site using html code to be specific.

IMAGES

This is achieved by using the code

For example if I wanted to add the image below titled lights.jpg

I would type

src - Specifies the path to the image

alt simply just titles your image so you can refer back to later if you need to.

In order to control the size of the image you would add the width=“pixels”/> to the end of the code.

i.e

LINKS

To add a link to your website you will need to use this:

If I wanted to link my LinkedIn

https://www.linkedin.com/in/tyran-lovett-7677311ab/

I would type

<a href="https://www.linkedin.com/in/tyran-lovett-7677311ab/”> Tyran Lovett’s LinkedIN</a>

Relative VS Absolute URLs

This week we also learned the difference between relative and absolute URLs

Relative URLs describe a link to webpage within the same website. i.e a link to a contact us page on a companies website. These links don’t have the https://www”

An absolute URL is a full link, which could be a link to another website. This link will open in a new tab.

Link to an Email address

This is achieved by using

<a href="mailto:[email protected]">Send email</a>

In my case I would type

<a href="mailto:[email protected]">Send email</a>

#halloween #html #links #images

This website has been very useful. It seems to have everything about web development. In utter awe right now. Have I found the coding bible hehee ?

#coding #html #bible

Let’s get this show on the road

Week 2 has finally commenced and I really am starting to like this course. It’s hard getting used to the virtual classroom but hopefully over time it will get easier.

This week we learned the very basics of HTML. In this module we are particularly focusing on HTML5 as it is the most heavily used form of language today.

We were introduced to the basics, such as paragraphs <p>,headers<h> ,bold<b>,italics<i> etc.

This week was also the first week of our labs. Labs allow us to put the theory we learn in the lecture to practice. For this weeks lab we created basic web pages that use elements i.e

<!DOCTYPE html> <html lang='en'> <head>

<h1> Tyran is the best person in the world. </h1>

<p1> This because he is talented at everything</p1>

<body/>

</html>

#html #basics

Intro

Okay. So today was our first web authoring lecture. I’m feeling quite optimistic about this module as I’ve done web authoring in my undergrad. However, I’m looking forward to improving on this skill as at times I found it to be quite daunting in the past. My basic knowledge of Html5 will definitely be useful but I’m asking myself if it will be challenging as I’m pretty sure we are using a different software than Dreamweaver. Only time will tell. I’ll keep you updated next week.

#webauthoring #interactivedigitalmedia

Trending Blogs

Recently Viewed Blogs

Tyran Lovett