Html & CSS help

bobbinnija

Member
Joined
Mar 13, 2017
Messages
115
Reaction score
1
Hi everyone, i am really new to programming. I just started to learn about HMTL and CSS, i have just created a html document but i am wondering how do i assign a "url" to it so other people that is not using my computer can view it on the web?
 

stan216

Senior Member
Joined
Jul 8, 2012
Messages
1,034
Reaction score
34
To assign a URL, you need to purchase a domain name and host a server. Then load your webpage to that server.

Since you are still learning, you might want to try XAMPP. It is a web developer tool that also provides a database for "dynamic pages" e.g. forums, the layout is the same, but displays different content for different sections of the forum. You can then access your webpage from another computer within the same network to simulate an online viewing.
 

davidktw

Arch-Supremacy Member
Joined
Apr 15, 2010
Messages
13,547
Reaction score
1,301
Hi everyone, i am really new to programming. I just started to learn about HMTL and CSS, i have just created a html document but i am wondering how do i assign a "url" to it so other people that is not using my computer can view it on the web?

Just like what you are doing now, "hosting" your web pages in your laptop, you need a server/service which allow the rest of the world to have network access to your webpages. This is known as website hosting.

The usual way in the past is purchase a web hosting plan with web hosting companies, and then upload your webpages files into their web server via perhaps FTP or WEB access method, then the world will be able to access your webpages. In order to give your website an identity, webmasters normally purchase a domain name such as apple.com, ibm.com, google.com, singtel.com.sg etc, so that the name can be resolve into an Internet resolvable Internet address (known as IP address, previously in sets of 4 digits separated by dots eg: 52.220.200.100.

The world users launch their browsers at the URL http://www.google.com, which get resolved to http://172.217.24.164, which then normally hit the index page at http://172.217.24.164/index.html. That is where your website start presenting itself to the world.

Godaddy(https://sg.godaddy.com/hosting/web-hosting) is one such webhosting you can consider. There are thousands of web hosting companies in the world today, some like godaddy are well known. Here is a list of top 20 for year 2018 https://financesonline.com/list-of-20-best-web-hosting-companies/

If you would like my recommendation, I would suggest an approach more recent these days.
Go sign up for an Amazon Web Services account @ https://aws.amazon.com, for the first year you will be given a free web tier to learn about it and also use some of its basic features free with certain limitations. You will need a credit card to get started. If you don't have one, ask your parents for one if they have it.

You can make use of the AWS S3 service to host your static webpages to start understanding web hosting. Follow this tutorial at https://node.university/blog/1043674/aws-s3, to get you started.

When you are ready to venture more, then you can ask more questions here. Happy hosting... :)
 

bobbinnija

Member
Joined
Mar 13, 2017
Messages
115
Reaction score
1
To assign a URL, you need to purchase a domain name and host a server. Then load your webpage to that server.

Since you are still learning, you might want to try XAMPP. It is a web developer tool that also provides a database for "dynamic pages" e.g. forums, the layout is the same, but displays different content for different sections of the forum. You can then access your webpage from another computer within the same network to simulate an online viewing.

Oh i have to pay for a browser domain? I am currently using this application called atom to do my coding and it has been serving all my needs so far but because i am applying for uni ( and didnt study programming before) i wanted to show them something that i have done so they can understand my passion for this subject. Is there any way around buying a website/bringing my desktop to the school to let them view the file?
 

bobbinnija

Member
Joined
Mar 13, 2017
Messages
115
Reaction score
1
Just like what you are doing now, "hosting" your web pages in your laptop, you need a server/service which allow the rest of the world to have network access to your webpages. This is known as website hosting.

The usual way in the past is purchase a web hosting plan with web hosting companies, and then upload your webpages files into their web server via perhaps FTP or WEB access method, then the world will be able to access your webpages. In order to give your website an identity, webmasters normally purchase a domain name such as apple.com, ibm.com, google.com, singtel.com.sg etc, so that the name can be resolve into an Internet resolvable Internet address (known as IP address, previously in sets of 4 digits separated by dots eg: 52.220.200.100.

The world users launch their browsers at the URL http://www.google.com, which get resolved to http://172.217.24.164, which then normally hit the index page at http://172.217.24.164/index.html. That is where your website start presenting itself to the world.

Godaddy(https://sg.godaddy.com/hosting/web-hosting) is one such webhosting you can consider. There are thousands of web hosting companies in the world today, some like godaddy are well known. Here is a list of top 20 for year 2018 https://financesonline.com/list-of-20-best-web-hosting-companies/

If you would like my recommendation, I would suggest an approach more recent these days.
Go sign up for an Amazon Web Services account @ https://aws.amazon.com, for the first year you will be given a free web tier to learn about it and also use some of its basic features free with certain limitations. You will need a credit card to get started. If you don't have one, ask your parents for one if they have it.

You can make use of the AWS S3 service to host your static webpages to start understanding web hosting. Follow this tutorial at https://node.university/blog/1043674/aws-s3, to get you started.

When you are ready to venture more, then you can ask more questions here. Happy hosting... :)

Wow, thanks for your rly in-depth reply! I was actually searching around online for a solution to some of the problems i have faced while programming and saw someone who is said to be new as well post his URL online to request for help and then i realized i couldnt do that ._.

I am actually applying for a degree in ICT and because i am not from a related diploma i started reading up on css n hmtl and intended to do a website to show the schl my passion for this subject but is there any way i can show them the web and source code without owning a domain/laptop?

Can i also ask you a question that i have faced about the formatting. When i float an image to the left and i want a paragraph to wrap around it, how well they fit each other ( is heavily dependent on the browser size width n height) its like i want them to start and end at the same line and not overflow or have too little words ( due to the browser having too much space width wise) the overflow scroll element is also pretty ugly. I hope you can understand what i am trying to describe haha
 

bobbinnija

Member
Joined
Mar 13, 2017
Messages
115
Reaction score
1
I am having a really hard time optimizing html for the different screen resolutions

Lets say my current document fits nicely in a browser of 1240
When opened with a 720 browser will the website scale everything down appropriately or will it just let the elements like the text overflow if the new browser is alot smaller ( because they use my fix font size) there is not enough space to contain the paragraph text in 50% of the screen will it automatically shrink the size of my words to fit into the 50% allocated to it or does it overflow
And if it overflows does it do so horizontally or vertically or both

Background info:
I have 1 paragraph of words
Height & width set to lets say 50%
Font size selected as well
 
Last edited:

davidktw

Arch-Supremacy Member
Joined
Apr 15, 2010
Messages
13,547
Reaction score
1,301
Oh i have to pay for a browser domain? I am currently using this application called atom to do my coding and it has been serving all my needs so far but because i am applying for uni ( and didnt study programming before) i wanted to show them something that i have done so they can understand my passion for this subject. Is there any way around buying a website/bringing my desktop to the school to let them view the file?

For your purpose, you don't need to buy anything. Do you own a laptop yourself ? If you do, install a simple web server into your laptop and then host your own website internally to your laptop and show them what you have did.

Domain name to IP address can be hosted virtually free for your case in Amazon Web Services or Azure or Google Compute Engine.

Just use any free domain name hosting services such as No-IP.com, and you can map a domain name to your webhosting IP for demo purpose.
 

davidktw

Arch-Supremacy Member
Joined
Apr 15, 2010
Messages
13,547
Reaction score
1,301
I am having a really hard time optimizing html for the different screen resolutions

Lets say my current document fits nicely in a browser of 1240
When opened with a 720 browser will the website scale everything down appropriately or will it just let the elements like the text overflow if the new browser is alot smaller ( because they use my fix font size) there is not enough space to contain the paragraph text in 50% of the screen will it automatically shrink the size of my words to fit into the 50% allocated to it or does it overflow
And if it overflows does it do so horizontally or vertically or both

Background info:
I have 1 paragraph of words
Height & width set to lets say 50%
Font size selected as well

The main idea of web design is free flowing of contents, without even going into the topic of web responsiveness.

The most basic free flowing webpage you can get is the following @ https://codepen.io/anon/pen/vdwjmd. The paragraph will flow across the page default from left to right, and overflow default from top to bottom. You adjust the width of the browser and the flowing changes dynamically as the browser re-layout and render.

Styling is what you want to play with. Here is an example where the body of the text are width at only 50% of the browser width and obviously the wrapping will be more frequent and occupy for vertical asset of the browser, which may or may out result in scroll bars to appear depending on styling and height of your browser and/or parent containers, as shown in https://codepen.io/anon/pen/bLyMrZ

Here is a method at which you can control center of a block of text across the width of the browser width. https://codepen.io/anon/pen/wybjPO

HTML layout topic is a very vibrant topic because of cross browser compatibilities, changes in layout algorithms from versions to versions, different devices form factors and HTML/CSS specification changes, and even bugs in the browsers in certain versions. It would be hard to articulate to you for your question is dependent on what you EXACTLY want to achieve and how you are placing your elements. Some methods are quick and dirty, some are complex but take care of arcane scenarios in dynamic pages and/or cross browser compatibilities. Sometimes you even need to resort using Javascript to detect the browser and screen size and make dynamic changes on the fly.

It would be easier to guide you, if you ask some more concrete questions.

Actually for your purpose of demonstrating your capabilities, you can also use codepen, jsbin, jsfiddle as your scratchpad.
 

bobbinnija

Member
Joined
Mar 13, 2017
Messages
115
Reaction score
1
The main idea of web design is free flowing of contents, without even going into the topic of web responsiveness.

The most basic free flowing webpage you can get is the following @ https://codepen.io/anon/pen/vdwjmd. The paragraph will flow across the page default from left to right, and overflow default from top to bottom. You adjust the width of the browser and the flowing changes dynamically as the browser re-layout and render.

Styling is what you want to play with. Here is an example where the body of the text are width at only 50% of the browser width and obviously the wrapping will be more frequent and occupy for vertical asset of the browser, which may or may out result in scroll bars to appear depending on styling and height of your browser and/or parent containers, as shown in https://codepen.io/anon/pen/bLyMrZ

Here is a method at which you can control center of a block of text across the width of the browser width. https://codepen.io/anon/pen/wybjPO

HTML layout topic is a very vibrant topic because of cross browser compatibilities, changes in layout algorithms from versions to versions, different devices form factors and HTML/CSS specification changes, and even bugs in the browsers in certain versions. It would be hard to articulate to you for your question is dependent on what you EXACTLY want to achieve and how you are placing your elements. Some methods are quick and dirty, some are complex but take care of arcane scenarios in dynamic pages and/or cross browser compatibilities. Sometimes you even need to resort using Javascript to detect the browser and screen size and make dynamic changes on the fly.

It would be easier to guide you, if you ask some more concrete questions.

Actually for your purpose of demonstrating your capabilities, you can also use codepen, jsbin, jsfiddle as your scratchpad.

This is actually alot to take in hahaha so i will just start off by saying no i dont have a laptop and if thats my only option then i will borrow one.

Oh so i can actually get a free browser domain? When i book out from camp i will try to link it to my html file. I tried googling this over and over again but <a href> keep turning up on my google feed -.-

Okay so based on what i am understanding if i set a specific width the text will keep stacking downwards,vertically, but if i set a cap to its height would it still overflow vertically only? Or via its width as well?

I tried editing the code in the codepen url you included but there is no "run/ente"r button?

I think i can better describe it to you by just showing u the website i came up with in a few days time when i get home from camp if you dont mind

But this is the general gist of it

I float an image to the left and have a paragraph wrapped around it.i actually intend for it to end only BEFORE or at the same line as the picture. Its quite text heavy so depending on the browser size it can really affect the formatting in a sense that if the resolution in terms of width is small the text will going beyond the height of the picture but .

How would you recommend i optimize html to fit all browsers? ( if i am not creating more than 1css file for multiple resolutions)
Option 1: set a width to my content like 1080p so all browsers with that resolution and above can see the website the way i designed it to be.
Whereas for browsers smaller than that width they can just scroll right to left or vice versa but the formatting still remains intact

2) set width as % but if the document is text heavy the formatting will be destroyed(?)
 

davidktw

Arch-Supremacy Member
Joined
Apr 15, 2010
Messages
13,547
Reaction score
1,301
This is actually alot to take in hahaha so i will just start off by saying no i dont have a laptop and if thats my only option then i will borrow one.

Oh so i can actually get a free browser domain? When i book out from camp i will try to link it to my html file. I tried googling this over and over again but <a href> keep turning up on my google feed -.-

Okay so based on what i am understanding if i set a specific width the text will keep stacking downwards,vertically, but if i set a cap to its height would it still overflow vertically only? Or via its width as well?

I tried editing the code in the codepen url you included but there is no "run/ente"r button?

I think i can better describe it to you by just showing u the website i came up with in a few days time when i get home from camp if you dont mind

But this is the general gist of it

I float an image to the left and have a paragraph wrapped around it.i actually intend for it to end only BEFORE or at the same line as the picture. Its quite text heavy so depending on the browser size it can really affect the formatting in a sense that if the resolution in terms of width is small the text will going beyond the height of the picture but .

How would you recommend i optimize html to fit all browsers? ( if i am not creating more than 1css file for multiple resolutions)
Option 1: set a width to my content like 1080p so all browsers with that resolution and above can see the website the way i designed it to be.
Whereas for browsers smaller than that width they can just scroll right to left or vice versa but the formatting still remains intact

2) set width as % but if the document is text heavy the formatting will be destroyed(?)

There are a lot for you to learn about HTML and CSS. There are a lot more about Javascript which you haven't touch on. Here is an example for you to observe

https://codepen.io/anon/pen/yvWZzb
 

KnightNiwrem

Senior Member
Joined
Jun 1, 2014
Messages
1,057
Reaction score
0
Oh i have to pay for a browser domain? I am currently using this application called atom to do my coding and it has been serving all my needs so far but because i am applying for uni ( and didnt study programming before) i wanted to show them something that i have done so they can understand my passion for this subject. Is there any way around buying a website/bringing my desktop to the school to let them view the file?

If it is just a static webpage without backend - which is what this project sounds like - you can even just consider hosting it on github pages or bitbucket pages indefinitely.

Of course, you will need to use some of the single-page web application frameworks to make it feel like it has more than 1 page - but it would definitely be worth it.
 

davidktw

Arch-Supremacy Member
Joined
Apr 15, 2010
Messages
13,547
Reaction score
1,301
If it is just a static webpage without backend - which is what this project sounds like - you can even just consider hosting it on github pages or bitbucket pages indefinitely.

Of course, you will need to use some of the single-page web application frameworks to make it feel like it has more than 1 page - but it would definitely be worth it.

That's a good idea :)

Suppose one can traverse between the GitHub pages too, doesn't really need to be SPA. If one would like to use their own domain, just configure the GitHub with custom domain for virtual hosting (https://help.github.com/articles/using-a-custom-domain-with-github-pages/)

Just food for thought, actually recent web developments have been really exciting.

One can simply run a shared worker in the browser as "server-side". Basically it's web workers, but they will persist and accessible across webpages. Since it will not persist across reloads, one will need to use in browser storage such as LocalStorage, Cookie or Session Storage for data persistence.

Too bad Homomorphic Encryption has yet to be performant viable, otherwise, secured computing using client resources would be very exciting! :)
 
Last edited:

jgyy1990

Arch-Supremacy Member
Joined
Apr 28, 2012
Messages
12,422
Reaction score
88
i have been testing out angular firebase which can totally omit writing server codes in node.js or express.js. rxjs is still needed though.

btw once you learnt html css javascript, i recommend picking up frameworks such as angular, react or VUE
 

Aresden

Senior Member
Joined
Aug 15, 2008
Messages
1,976
Reaction score
10
If you would like my recommendation, I would suggest an approach more recent these days.
Go sign up for an Amazon Web Services account @ https://aws.amazon.com, for the first year you will be given a free web tier to learn about it and also use some of its basic features free with certain limitations. You will need a credit card to get started. If you don't have one, ask your parents for one if they have it.

You can make use of the AWS S3 service to host your static webpages to start understanding web hosting. Follow this tutorial at https://node.university/blog/1043674/aws-s3, to get you started.

When you are ready to venture more, then you can ask more questions here. Happy hosting... :)

May I ask, why is this approach more recent these days? Is AWS acting something like a CMS(wordpress,blogspot) now?
What are the pros and cons?
 

davidktw

Arch-Supremacy Member
Joined
Apr 15, 2010
Messages
13,547
Reaction score
1,301
May I ask, why is this approach more recent these days? Is AWS acting something like a CMS(wordpress,blogspot) now?
What are the pros and cons?

Good that you asked. Amazon Web Services (AWS) is currently the one of the largest cloud providers in the industry today, and also the most prominent leader as reported in Gartner (source: https://www.theregister.co.uk/2017/...icrosoft_are_the_cloud_leaders_by_a_fair_way/). You do have Microsoft Azure trailing closely behind and followed by Google Cloud.

Basically AWS is an extremely large Infrastructure-As-A-Service(IaaS) provider, analogous to data centre, with its business spanning across the global and across multiple data centres situated all over the world. Microsoft Azure and other cloud providers works in similar fashion with differences to services offered and scale.

AWS is well suited in SME having that it provides a Pay-As-You-Go(PAYG) costing model as well as a very responsive, near realtime deployment process. For smaller businesses, upfront cost are often hefty investment, which business tries to avoid. SO the PAYG costing model helps to turn CAPEX into OBEX which allows SME to attempt into big solution deployment projects.

In the past, businesses would need to procure infrastructures hosted in one or more data centres. You need to procure racks, switches, load balancers, firewalls, servers, hard disks, tape backups, patch panels, KVMs, cabling services and more. All these requires either competent engineers, and/or engaging with vendors via professional services to get them installed and tested. The process is rather laborious which makes hosting companies later provides virtual servers or managed servers to help with SME. However the turn around time normally isn't immediate or you have also limited services from these early days managed services.

Hence some years (slightly over a decade) back, cloud providers suddenly spawn out from major hosting companies such as Rackspace, Linode, so forth. Microsoft, AWS, Google ain't hosting companies, but because of their existing infrastructure hosting their services, they went into the cloud provider businesses too, having they are capable of providing managed services by further beefing up their infrastructure.

Years later today, mature cloud providers like AWS, Azure and GCE provided an assorted range of managed services from Computing Nodes, Database(SQL & NoSQL & Document/Object) Managed Services, DNS, Encoding, AI and Data Processing Compute services, Security Managed Services and more.

As a small or large business, now you don't need to spend a lead-time of maybe weeks to months procuring infrastructures from vendors, and then another couple of weeks or months to install your OS and software and get your hardware in place. You simply just sign up to their services with a credit card or payment agreement, log in to these cloud providers web management console, and in a couple clicks and waiting time in minutes or hours, you can potentially deploy your solution that span across data centres and the world.

I won't go into the Pros and Cons, which you can further research on your own or others to provide in this thread. Probably one of the main disadvantage that are mostly surrounding cloud providers will be Security, which in my opinion are mostly greatly misunderstood when you just take it without context. In actual fact, when you architect your solution properly, you may actually get more security hosting in mature cloud providers than having it in your own premises or 3rd party local, manually managed, data centres

Ask more if you would like to know more. In short AWS is a much larger thing than a software CMS. :)
 

kuma-mon

Arch-Supremacy Member
Joined
Apr 16, 2017
Messages
10,453
Reaction score
5,166
I'm also learning web development too. So far so good. All the best TS. :):)

Personally, this is what I do to make my learning more impactful. First u study HTML, CSS then u develop your own website to test your knowledge. Keep practicing until u get the hang of it and dont have to google for solutions. The tricky part would be CSS animation. Because you are using this to enter poly, i think for now these two would be enough. One of the user mentioned about Xampp, u can use that to host your website locally and showcase to the interviewers.

But if you wanna pursue web development career, you will have to pick up all the newest CSS and javascript frameworks. An example would be SASS, bootstrap for CSS. For javascript, jquery, nodejs, angular. Right now it is a bit overwhelming for you, just take it slowly. Study javascript first, then implement it to your website. Keep practicing.
 

jgyy1990

Arch-Supremacy Member
Joined
Apr 28, 2012
Messages
12,422
Reaction score
88
use angular and firebase, they can be serverless if you do not intend to venture into back end development. bootstrap are more for the grids which helps in developing pwa. if you dont want to use angular/ vue/ react, at least use node.js to install all your packages instead of pasting countless scripts and styles tag into html file.
 

davidktw

Arch-Supremacy Member
Joined
Apr 15, 2010
Messages
13,547
Reaction score
1,301
use angular and firebase, they can be serverless if you do not intend to venture into back end development. bootstrap are more for the grids which helps in developing pwa. if you dont want to use angular/ vue/ react, at least use node.js to install all your packages instead of pasting countless scripts and styles tag into html file.

Additional Information:

Serverless design is not restricted to programming languages. It's just the Platform-As-A-Service(PaaS) that you choose. Using AWS Lambda as an example, you can choose C#, Go, Java, Node.js, Python. Heroku supports Node.js, Ruby, Java, PHP, Python, Go, Scala, Clojure.

Angular(with or without Firebase) are just frontend portion, fundamentally server-less design can be achieve with bare TCP request/response models (not even just HTTP, RESTful or Ajax approach). With relevance to HTTP web, it can be achieve with just basic web design.

BTW when you are touching Node.JS, that is backend development.
 

Aresden

Senior Member
Joined
Aug 15, 2008
Messages
1,976
Reaction score
10
Good that you asked. Amazon Web Services (AWS) is currently the one of the largest cloud providers in the industry today, and also the most prominent leader as reported in Gartner (source: https://www.theregister.co.uk/2017/...icrosoft_are_the_cloud_leaders_by_a_fair_way/). You do have Microsoft Azure trailing closely behind and followed by Google Cloud.
........

appreciate your broad explaination, with business needs and even its history.

Actually im just keen on finding a way to learn web development on a personal level. I have signed up for the AWS free 1 year trial, it seems a little intimidating with the amount of function/features though, will proceed further during my summer break, thanks :D
 

davidktw

Arch-Supremacy Member
Joined
Apr 15, 2010
Messages
13,547
Reaction score
1,301
appreciate your broad explaination, with business needs and even its history.

Actually im just keen on finding a way to learn web development on a personal level. I have signed up for the AWS free 1 year trial, it seems a little intimidating with the amount of function/features though, will proceed further during my summer break, thanks :D

Well, it should be intimidating and you want it to be :) After all, it's a Swiss knife for millions dollars deployment right ?

Let me just give you some heads up. The basic things you want to get started with is the following, go read up on them

  • Elastic Compute Cloud (EC2)
  • Relational Database Service (RDS)
  • Virtual Private Cloud (VPC)
  • Security Groups (SG)

Know the few things above would have got you started. Once you get started, you will know what to find out more and what to ask

Let me help you get started with the searching
http://bfy.tw/HeqJ

The first link is a very good start, and then you can ask more questions in this forum. I will help you out, if you also help yourself out :)
 
Important Forum Advisory Note
This forum is moderated by volunteer moderators who will react only to members' feedback on posts. Moderators are not employees or representatives of HWZ Forums. Forum members and moderators are responsible for their own posts. Please refer to our Community Guidelines and Standards and Terms and Conditions for more information.
Top