Download to read offline
More Related Content
![[EclipseCon France 2017] Eclipse Platform Generic Editor](https://cdn.slidesharecdn.com/ss_thumbnails/ece2016genericeditorpresentation-170623085613-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Building your first webpage
Building your first webpage
- 1. Building your firstWebpage CIT-125, Updated FA2021
- 2. Before even startingto Code ● Think about file organization and folder organization: ○ Where will you save your files? ○ How many files will you need for your website? ○ Will you need subfolders for other assets? ● Avoid just ‘diving in’ - getting a plan in place for organizing the project can save a lot of trouble and issues during the development process.
- 3. Project Organization: Suggestion ●Most HTML/CSS Websites can be small in file size, so storing locally is an option. ● Be sure the project is in a folder. ○ You will move this folder from save location to save location ○ Not doing so could break your project
- 4. Project Organization: Suggestion Oncethe project folder is planned, then go into an IDE and the last part is creating the index.html document.
- 5. Why index.html? ● CanI just name the page whatever I want? ○ Technically yes, not a good practice. ● Servers are often set to search for specific file names when a specific file name is not given. ○ Majority of web hosting servers, will look for either: ■ index.html ■ Default.html ● For any home or landing page of a website - Get into the habit of naming that page index.html or default.html
- 6.
- 7. Terminology: Web Sitevs. Webpage Just a quick tip/note on how we talk: Web Site: When developers talk about Web sites, we are referring to the entire folder that stores all the assets and pages/files that are utilized to create the user experience Webpage: Normally this is the reference to a specific document in the Web Site (for example, index.html). Webpages are parts of an overall web site.
- 8. Don’t forget yourtitle In the head tags, the title tag for displaying the title of the page on a web browser tab:
- 9. Watch where youare writing your code! Too often new HTML coders will get confused and start writing the HTML code in the wrong place. Specifically - I see folks who will write code in the <head> tags. Yes, the browser will render some of this in the early portion of the course - Be aware as we move into more advanced concepts, this can break your entire webpage and website.
- 10. Incorrect Code Placement- Example
- 11. Correct Code Placement- Example Notice from the previous slide: From a presentation standpoint, you can not tell a difference! Be aware of where you are writing your code.
- 12. Using Commenting Tags Servetwo very important purposes: 1. Design notes and information: a. Provide other developers with info on what your code is doing b. Remember - Comments can be seen by the general user if they know to view the source code. Keep it professional. 2. Troubleshooting and debugging: a. Test code sets that may or may not function b. When emailing the instructor - Leave the commented code in! This will help to see what your thought process was, and guide you in troubleshooting!
- 13.