Each title in the unordered list should be enclosed in <li> tags (list items).
<li>Where to stay</li>
So I've managed to make it look the same as what you've said and it now works but I have to do it playing with the indent and outdent code buttons. Is there a way that I can do this part without that because the tutorial suggests that it does the list items and their indents automatically?
It sounds as though the focus was in Code view when you clicked Unordered List in the Insert panel. If you're in Code view, only the <ul></ul> tags are inserted.
Click at the point you want to insert the list to put the focus in Design view. Then click Unordered list. That automatically inserts the first list item and leaves the cursor (insertion point) between the <li></li> tags:
When you start typing, the text is inserted between the list item tags. Pressing Enter creates a new pair of list item tags for you to add your text to.
Code view works differently from Design view on the assumption that when you're in Code view you know what you're doing. That's why it doesn't automatically insert the <li> tags. For example, if you're building a page using a server-side technology, such as PHP, you might want to insert dynamic code to generate the list from a database result.
Thanks for the help this has sorted everything that I needed help with.