ozbailey

[ozbailey]

Introduction to the Web

This is a late coming post and it should be at the bottom. The first class we had in the school was about the web. The world wide web (www) is combination of linked documents that are accessed with Internet. Internet is a combination of computer networks with some standarts to link devices. Web is not the same thing as internet. 

Web page is a hypertext document that is created with HTML and the web site is a group of web pages. 

Web pages are stored on web servers and accessed by browsers. Web servers are physical devices that deliver web pages to users. Web browser is a software for seeing the documents online. Examples are firefox, chrome, safari, edge and opera. 

HTTP is the communication protocol between client and the server. 

On this address https is a secure protocol and the remaining part is the domain name. Browsers don’t use the web addresses, they are using IP addresses to find web servers.

Each computer that connects to the internet has a unique address. Our browser contacts a network of servers called DNS. DNS translates domain names to IP addresses. 

There are static and dynamic web pages. If we visit a static page, we all get the same content. But if we visit a dynamic page, we get individual contents based on our information. Dynamic websites require languages like PHP or Ruby. 

But both of these websites will usually give us a HTML page. HTML is complimented by CSS, it adds design. Javascript adds functionality and interactivity. 

Three Standard of the Web are: HTML, CSS, JavaScript

Three Standards of the Web are: Structure, Presentation, Behaviour

These are the fundamental knowledge about our daily life on internet.  

[ozbailey]

Responsive Web Design, Media Queries, Web Typography and CSS Images

Responsive Web Design consists of 3 features.

1) Flexible, grid-based layout

2) Flexible images and media

3) Media queries

Using fractional units makes the grids proportional. But it will also break down at certain sizes. We should make our page to fit every browser as much as possible. The solution is media queries. Following is how we use the media queries: 

This query checks if the media type is screen and the browser’s viewport is at least 1024 pixels wide. Using the following code makes the browser’s viewport equal to the width of the devices screen:

Some common breakpoints are as follows: 

Widescreen: 1300 pixels or higher

Standart: 960-1300

Tablet: ~768 pixels

Mobile: ~320 - 480

Another quick solution for images to fit the screen is coded as follows: 

And then there are web fonts. They allow you to specify font files along with the website files. They should be downloaded and be with other font files. Common file types include WOFF WOFF2 and it is supported by most of the browsers. We can use the following code to download the fonts and we can use this font-family name in our font stacks: 

We can use font-weight values between 1 and 1000.

There are paid and free font services. Typekit is one of the paid ones and google fonts is a free one.

After the fonts another issue is background images. We can use the following code for background images: 

We can repeat the images using background-repeat code. This has 4 values; repeat, repeat-x, repeat-y and no-repeat. 

We can determine the position of the image by using background-attachment feature. This has possible values of scroll, fixed and local. 

We can also alter background size and background position. 

[ozbailey]

Researching and Planning a Website

Building a website consists of 5 stages. 

Brief is the first stage, which is the starting point of the project. There is a client brief which explains the needs of a client via an email, a phone call etc. And also on the first stage we have to find a purpose for our website. 

Then we should start the research, there can be surveys or interviews to understand the goals and purposes of the project. We have to assess what is the project about, why is it being created and what influence does it make. 

We have to define the vision of the site and should know what people wants from it. We also have to understand who are going to be the users of this website, how is their background and what are their interests. Then we have to analyze the tasks, contents, features and functionality.

We have to determine who will provide and maintain the content. And we have to measure our competitors. We have review the similar businesses and examine their wins and losses. 

Before the site is built, we have to plan the content, site map, give pages a name and write a description for each page. 

Usability is another great concern when building a web site. A web site should be effective, efficient, safe and memorable. Visitors should be able to learn to use it easily and should remember it the next time they use. 

Navigation is the most important part for a web page. It should be easy and people should be using it like they have used it before. Sometimes header part of the website contains the navigation. 

Header also contains logos, search bars, login options and the logo usually acts like home button. 

A wireframe is the draft of a website, it defines the location and size of the page, the header, the navigation, content areas, footer etc. 

[ozbailey]

Server-Side Development and CMS

On this lecture we’ve learned about how static and dynamic websites are created. 

The highlighted part should be dynamic, it was misspelled.

Some of the scripting languages include PHP, ASP, Python, Ruby and Java.

PHP generally gets an input from a user and interacts with a database, then it constructs a HTML document. Then this is sent to the user’s browser.

A database is the collection of data which is stored and and accessed on a computer. 

Content Management System is a software app which allows user to manipulate the website. We can manipulate the content without writing any code. Examples of content management systems include Drupal, Joomla, WordPress and Moodle. 

We have learned how to install a wordpress account and setting it up. We’ve added themes, customized and used some widgets. Then we have installed some plug-ins to extend and add functionality in WordPress. 

We have created our own WordPress account and edited it the way we like it. 

[ozbailey]

CSS Grid

Css Grid is a combination of horizontal and vertical lines. The space between the lines are called tracks, space between tracks are called gaps. We use display:grid to define a grid container. 

We can use repeat function to create grid columns:

#container { display:grid; grid-template-columns:repeat(3, 1fr); } 

This will create 3 tracks, with a width of 1fr.

We can define the track sizes with grid-auto-rows.

We can also position the items by using grid-row and grid-column items and even shorter we can use grid-area with 4 inputs to position an item in one line. 

We can also assign a name to an area like grid-area:header;

Like in the flexbox, grids also have two axes. One of them is block axis and the other one is inline axis. 

We can use align-items to align all the items and align-self for individual items. 

align-items can have the following values: auto, normal, start, end, center and stretch.

Same values are used for justifying items. 

These features gives us great flexibility when creating a website. 

[ozbailey]

CSS Flexbox

After the box model on CSS, we have started with the Flexbox topic. Flexbox is a one-dimensional layout model. You change the location of the items as rows or columns. 

Flexbox has flex container and flex items which lets you change the items’ width height and order. To make a container you can use the following code: 

.container { display:flex; }

The axis of the flex box is defined by flex-direction. It can be row, row-reverse, column and column-reverse.

Row will sort the items horizontally from left to right and column will sort the items from top to bottom. Row-reverse and column-reverse will do the opposite of it. 

If you use flex-wrap:wrap items will be gone to next line in a container when there is not enough room. If you use flex-wrap:nowrap, it will shrink to fit the space. 

We have 3 features as flex-grow, flex-shrink and flex-basis. We can use these features in one line as follows: 

flex:0 1 auto;

You can also align items with the following values:

flex-start

flex-end

center

stretch (default)

These values will align the items in cross-axis. 

We can also use justify-content to align items on the main axis. Justify content has the features of flex-start, flex-end, center, space-between, space-around and space-evenly.

We can also use gap feature to place a gap between items. 

[ozbailey]

CSS Colour, Box Model, Links and Lists

When you are designing a website using CSS, you can use Colours with using colour names, hexadecimal values or RGB number. You can use the colour properties for texts, shapes and backgrounds.

In CSS, the box model uses four areas: Content in the middle, padding which surrounds content, a border and the margin. 

Padding is the space between the content and the edge of the box and has the background colour.

Margin is outside the CSS box and surrounds it. Margins can have negative values. 

We can also add borders to the elements with different sizes, colours and styles. And also there are extra features called border radius and box shadow. 

Links can be styled using CSS. There are 5 states of links, which are unvisited, visited, focus, hover and active. 

Lists also can be styled using CSS. By default lists are indented and it can be removed by using CSS. We can also change lists to from vertical to horizontal. 

These features we learned are really adding flexibility to our knowledge of website creation. It is now easier to reflect your own ideas on the websites that you design. 

[ozbailey]

Introduction to CSS and Typography

So, we have finally started learning about CSS. It is the way to design our webpage. With CSS we can change text attributes, colours, sizes and positions of elements. There are three ways to add CSS to our web page, best and easiest way is to add it externally.

In CSS there is a selector and its value. So if we say “p { color:green; }” all the p elements will be green. We have four ways to use the selector. We can use selection by element, selection by class, selection by ID and selection by position.

Selection by element, p {…}, changes every selected element. Selection by class, .important {…} changes the selected class. Selection by ID, #masthead {…}, changes the specific element which has that ID. Selection by position is, p a{…}, will change all the links in paragraphs.

In CSS Typography, we have learned about how to choose font family, how to choose alternative fonts, how to change the style and size of a font, how to use spacings and text alignments, underlines and overlines. With help of these knowledge, we have changed our HTML Lab assignment into a more appealing page. We have used selectors, deleted underlines from links, used different fonts and alternative ones, changed sizes of texts, changed the alignments of some elements.

It is great to work on a customizable web page instead of a plain HTML page, it feels like freedom and you can reflect yourself on the page you make.

[ozbailey]

HTML Structural Elements

Most websites have similar structure. Header, if it is a child of a body, generally includes site name, logo and navigation. Navigation includes contents and links to those contents. Article element generally includes comments, posts, paragraphs. Aside element or sidebar element is used for advertisement, links, recents etc. and it usually appears on the right side of a web page. Footer is usually at the bottom of a page and shows some links and copyright information.

“Div” can be used for non-specific element if there are no better options. And there are some inline elements like <a> for links, <em> for italics, <strong> for bold and <img> for images.

Header and footer can also be used in an article element.

Finally, there is a meta/charset element which defines a character set for browser to use. It is generally UTF-8 globally. It is shown as <meta charset=”utf-8”> and should be at the top of an HTML file just after <head>.

These structural elements we have learned are critical for the appearance of a web page. It puts the web page in an order, and it looks like a proper web page. Users will know that it is a well structured web page if we use these rules to create it. They won’t feel like a strangers and say “what’s wrong with this website” and they will navigate easily like any other webpage. Next week, we will be covering CSS Elements, so we will be one step closer to a perfect web page design.

[ozbailey]

HTML Lists, Links and Images

In our 3rd lecture of Web Authoring, we have covered the topic of HTML Lists, Links and Images.

Lists are divided into two topics, which are unordered lists and ordered lists. It is not different than any list that we use in our daily lives. Unordered lists are the lists that do not have any order and there are dots before any listed item.

Ordered lists are in specific order, and you can start the list from any number you like.

Unordered Lists are shown as <ul>…</ul> and ordered lists are shown as <ol>…</ol>. The elements in these lists are shown as <li>…</li>.

Links are used for clicking and getting directed to another web page or another content in the same web page.

The syntax of the links are as follows: <a href=https://google.com> Search on Google </a>

You will just see the “Search on Google” clickable link in a page, and it will direct you to the actual website.

You do not need the full URL if you are using links for the same page. You can just use something.html which is called a relative link.

If you want to specify an element, you can give a unique ID for it and just make it reachable by putting a hashtag in front of it.

If you want to add an image to your page in HTML, you can use <img src=”sth.jpg”>. But this should be in the same folder with your HTML file.

These are the things that make a web page more appealing and customizable. It makes the page more functional, more user friendly and more organized. So I think, even though they are not enough for a website to be perfect, it is necessary to combine them with other things to make it perfect.

[ozbailey]

HTML Semantics

In the second lecture of Web Authoring, we learned about elements that mainly goes into body part of HTML. There are paragraphs which are shown as <p>…</p> and they are commonly used in a web page. Paragraphs have one line of space between each other.

Headings are used to define headlines in HTML. They come in six sizes which you choose depending on the importance of the title. Headings are shown as <h1..6>…</h1…6>. There are also line breaks, which lets you skip to the next line. They are usually used in a paragraph and they are shown as <br>. Line breaks doesn’t have a closing tag, which is a rare thing in HTML.

You can also write in italic or bold. For italic you can use <em>…</em> and for bold you can use <strong>…</strong>. One last thing we have learned in the second lecture is blockquotes. When you have to use a quote that are long, you can use blockquote with a paragraph element. It shows as

<blockquote><p>…</p></blockquote>.

These are the main things we use in the body of a HTML file. It is easier to get used to it by practicing it, because then it could turn into a reflex to open and close a tag and where to use the correct elements. In the lab class of this week’s lecture, we have created simple HTML file using all of the elements we have learned in week 1 and week 2. It was really fun and educational to create it, it gives you the feeling that you can create something from scratch.

[ozbailey]

Introduction to HTML

I have taken a course about HTML and CSS a few years ago. In our first lecture of Web Authoring, we’ve learned about what is HTML, what it consists of and what is the syntax of it. This lesson was a refreshment on my memory of HTML. We’ve learned about head and body and what should they contain inside. Head contains the title, which has information that is seen on browser tabs and search results. Body contains different kinds of elements. Main information about the page appears in body section which is what we all see when we look at a web page.

There are few editors to write HTML in it. I tried notepad, notepad++, sublime text and Atom. Atom seemed more appealing to me, and I suggest anyone who wants to start coding in HTML. When you write code in HTML, you can use comments to remember what you did there. Comment is written like <!—comment -->. You can validate your code, which I was worried about when writing. Because, some browsers are ignoring the error and displays the right result, which is misleading for anyone who wants to learn to code. There is a website called https://html5.validator.nu/ to check if you did the coding right or wrong. It may also not show every mistake you make.

I’m happy that I selected this course, because as a Computer Scientist, it brings back too many memories back and it is making me happy to code again.